5.1.4 使用事件改变变量的值- 常用语法【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

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>

页面初始效果如图：