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