Vue 样式绑定、事件绑定

 

v-bind:class=" "    绑定样式

    <div id="app">
        
        
        <p v-bind:class="{red:true}">p1p>

        
        <p v-bind:class="{red:10}">p2p>
        
        <p v-bind:class="{red:0}">p3p>

        
        
        <p v-bind:class="{red:flag}">p4p>
        
        <p v-bind:class="{red:f}">p5p>
        
        <p v-bind:class="{red:'f'}">p6p>

        
        <p v-bind:class="{red:true,big:true}">p7p>
    div>

    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    flag:true
                }
            }

        })
    script>   

 

 

 

 

v-on:事件=" "    绑定事件

　　<div id="app">
       
       
       <button v-on:click="count++">count++button>
        
        <button v-on:click="tip1">alertbutton>
       
       <button v-on:mouseover="tip2" v-on:mouseout="tip3">mousebutton>
    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中。