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

5.1.5 组件中变量的使用

普通的变量使用方式，变量名放在左边两个大括号{{ 和右边两个大括号}}之间。如果我们需要在组件的属性里面调用变量的值，就需要使用如下格式：

v-bind:属性=”变量名”

也可以简写，将v-bind省略掉，格式如下：

:属性=”变量名”

下面我们来看一个完整的实例，我们定义一个变量bianliang01和值，然后按普通模式和将变量的值显示在input组件里面，完整代码如下：

<view>
    <!-- 在{{}}中间写变量的名称: -->
    bianliang01的值：{{bianliang01}}
    <input type="text" value="黄菊华" />
    <!--错误的写法：value="{{bianliang01}}"-->
    <!--我们需要使用vue.js的语法来绑定显示：完整写法-->
    <input type="text" v-bind:value="bianliang01" />
    <!--简写-->
    <input type="text":value="bianliang01" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        bianliang01: "黄菊华老师" //定义变量名和值
      }
    },
    methods: {

    },
    onLoad:function(){
    }
  }
</script>

<style>
/*input输入框样式*/  
input{
  padding: 5px; /*内边距*/ 
  border: 1px solid #C8C7CC;/*边框*/  
  margin: 5px;  /*外边距*/ 
}
</style>

效果如图：