vue 1-5 针对html页面中标签属性绑定数据的方法--动态绑定 v-bind

Vue中，不管是Vue对象的data数据，还是computed中的计算属性，或是methods中的方法,都可以在页面文件的标签中直接使用，但如果要在标签属性中使用，则需要使用v-bind绑定使用

　　{{ 变量名 }}，{{ 计算属性名 }}， {{ 方法名( ) }}

注意区分：

　　1. 微信小程序中，HTML中的标签，不管是内容还是标签属性中，都可以直接使用mustache {{ ... }} 来使用data中的变量

　　2. Vue中，标签内容可以直接使用mustache使用data中的变量，标签属性中则需要使用v-bind动态绑定data中的数据，且 不需要 mustache

 

 

1.  错误使用：  想要给标签中的属性赋值，使用mustache是错误的，{{ ... }}只会被识别为{{ ... }}字符串。如下：

　　            

　　　 

 

　　     

2.  正确使用：使用 v-bind，动态绑定，此时属性中使用Vue中data下的变量，将不会被识别为字符串，而是本身所代表的变量

　　　　

3.  语法糖写法　　省略v-bind  直接使用：即可

　　　　

4.  vue动态绑定，标签属性中的条件判断 与 微信小程序标签属性中条件判断的区别

　　　　1. vue中，v-bind绑定class样式，如需要判断是否满足index相等这个条件时，如下:

　　　　

　　　　2. 而小程序中，则是使用mustache语法{{ ... }}