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

    

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM