Vue 樣式綁定、事件綁定

 

v-bind:class=" "    綁定樣式

    <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中。