看栗子:html
<body> <div id="app"> <input type="button" value="按鈕" title="哈嘍~~~~這不是個人title"/> </div> <script src="./vue2.6.10.min.js"></script> <script> var vm = new Vue({ el: '#app', data: { mytitle: '嗨!這是我本身定義的title', } }) </script> </body>
想把 mytitle
所表明的 title
值放到 < input />
的 title
中去vue
錯誤方式:app
<input type="button" value="按鈕" title="mytitle"/>
直接在title
屬性中放入mytitle
的話,mytitle
會當看成字符串解析,並不會獲得咱們想要的mytitle
的值3d
正確方式:code
<input type="button" value="按鈕" v-bind:title="mytitle"/>
來吧展現:htm
自定義綁定多個屬性:blog
<div id="app"> <!-- <input type="button" value="按鈕" title="哈嘍~~~~這不是個人title"/> --> <input type="button" value="按鈕" v-bind:title="mytitle" v-bind:id="myid"/> </div> <script src="./vue2.6.10.min.js"></script> <script> var vm = new Vue({ el: '#app', data: { mytitle: '嗨!這是我本身定義的title', myid:'呀!這又是我自定義的id' } }) </script>
來吧展現:圖片
在屬性v-bind中,若是想要寫入一段內容,不能直接寫入,要用單引號包裹起來,不然會被看成變量去找,找不到這個變量的值會報錯ip
錯誤的方式:字符串
直接在後面拼接內容
<input type="button" value="按鈕" v-bind:title="mytitle+hhhh">
正確寫法:
用引號去包裹想要拼接的內容
<input type="button" value="按鈕" v-bind:title="mytitle+'hhhh'">
那麼問題來咯,若是拼接的內容不加引號的話,變量是否是能夠自定義呢,yeah~~~,能夠滴
<div id="app"> <!-- <input type="button" value="按鈕" title="哈嘍~~~~這不是個人title"/> --> <!-- <input type="button" value="按鈕" v-bind:title="mytitle" v-bind:id="myid"/> --> <!-- <input type="button" value="按鈕" v-bind:title="mytitle+'hhhh'"> --> <input type="button" value="按鈕" v-bind:title="mytitle+hhhh"> </div> <script src="./vue2.6.10.min.js"></script> <script> var vm = new Vue({ el: '#app', data: { mytitle: '嗨!這是我本身定義的title', myid:'呀!這又是我自定義的id', hhhh:"哈哈哈哈哈" } }) </script>
來吧展現:
總結:
v-bind
的用法:
1.v-bind:屬性名稱 = "自定義屬性名稱"
好比:v-bind:title="mytitle"
2.能夠省略v-bind
,用:
代替 ,能夠簡寫成 :屬性名稱 = "自定義屬性名稱" 好比: :title="mytitle" 3. 若是想要實現單純的表達式的拼接,必定要用引號包裹起來,不然會被看成變量來解析,在被看成變量解析的狀況下,能夠再從新自定義屬性的值而後再拼接起來