5.1.4 使用事件改变变量的值

       本小节结合变量的定义和事件来做一个实例：我们定义一个变量bianliang01；然后定义一个按钮，我们给按钮一个点击事件@click="dianji"，点击按钮的时候来改变变量的值，同步显示的变量值也会改变。

       完整代码如下：

<template>

     <view>

             <!-- 在{{}}中间写变量的名称 -->

             bianliang01={{bianliang01}}

             <!--@click="dianji" 表示点击事件，=后面是要处理的方法（函数）名称-->

             <button @click="dianji">点击按钮，改变变量的内容</button>

     </view>

</template>

<script>

     export default {

             data() {

                      return {

                               bianliang01:"点击按钮前的内容"  //注意这里是冒号 ：

                      }

             },

             //自定义方法都是写在methods代码块内

             methods: {

                      //自定义点击按钮的处理方法（函数）dianji

                      dianji:function(){

                               //点击按钮的时候，改变变量的值

                               //注意变量名前需要加上this，指向当前页面

                               this.bianliang01 = "点击按钮后的内容（黄菊华）" //注意这里是等号 =号

                      }

             }

     }

</script>

<style>

     /*按钮样式*/

     button{

             width: 80%;      /*宽度*/

             margin-top: 10px;/*顶部外边距*/

     }

</style>

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977

（4）毕业设计网

http://www.pc-365.net

（5）小程序编程网

http://www.4317.org

（6）计算机编程网

http://www.05423.com