v-bind: 系結樣式
<div id="app"> <!-- 值是物件形式，欄位名是class樣式名，值是boolean值，true是參考該樣式，false不參考 --> <!-- 值是false，只是不參考該樣式，并不是就不顯示該元素了 --> <p v-bind:class="{red:true}">p1</p> <!-- 可使用其它的值，會自動轉換為boolean值 --> <p v-bind:class="{red:10}">p2</p> <!-- 數字0轉換為false --> <p v-bind:class="{red:0}">p3</p> <!-- 如果是boolean、數值型之外的字串，需要加引號才會當做字串處理，如果不加字串，會當做變數處理 --> <!-- 常使用data中的變數作為值 --> <p v-bind:class="{red:flag}">p4</p> <!-- 沒加引號，當做變數處理，沒有這個變數，不會報錯，是認為值是null，轉化為false --> <p v-bind:class="{red:f}">p5</p> <!-- 加了引號，作為字串處理，不管是什么字串（包括空串、'0')，都轉化為true --> <p v-bind:class="{red:'f'}">p6</p> <!-- 如果有多個樣式，欄位之間逗號分隔即可 --> <p v-bind:class="{red:true,big:true}">p7</p> </div> <script> new Vue({ el:'#app', data(){ return{ flag:true } } }) </script>
v-on:事件=" " 系結事件
<div id="app"> <!-- 冒號后面指定事件，只用使用Vue物件中自定義的變數、方法，如果使用自帶alert()、console.log()這些預置的變數、方法，識別不了 --> <!-- 使用Vue物件中自定義的變數 --> <button v-on:click="count++">count++</button> <!-- 使用Vue物件中自定義的方法，如果函式有引數，寫上引數表 --> <button v-on:click="tip1">alert</button> <!-- 要系結多個事件時，不能把值寫成陣列、物件的形式，要使用多個v-on --> <button v-on:mouseover="tip2" v-on:mouseout="tip3">mouse</button> </div> <script> new Vue({ el:'#app', data:function(){ return{ count:1, } }, methods:{ tip1(){ alert(this.count); }, tip2(){ alert("mouser over"); }, tip3(){ alert("mouse out"); } } }) </script>
不管是系結樣式、還是系結事件，v-bind:class、v-on都需要置于Vue物件的管轄范圍內才有效，可以放在el指定的元素內，也可以放在template中，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/126443.html
標籤：JavaScript
上一篇：陣列排序