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语法{{ ... }}