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

    <div id="app">
         值是对象形式，字段名是class样式名，值是boolean值，true是引用该样式，false不引用 -->
         值是false，只是不引用该样式，并不是就不显示该元素了 -->
        <p v-bind:class="{red:true}">p1p>

         可使用其它的值，会自动转换为boolean值 -->
        <p v-bind:class="{red:10}">p2p>
         数字0转换为false -->
        <p v-bind:class="{red:0}">p3p>

         如果是boolean、数值型之外的字符串，需要加引号才会当做字符串处理，如果不加字符串，会当做变量处理 -->
         常使用data中的变量作为值 -->
        <p v-bind:class="{red:flag}">p4p>
         没加引号，当做变量处理，没有这个变量，不会报错，是认为值是null，转化为false -->
        <p v-bind:class="{red:f}">p5p>
         加了引号，作为字符串处理，不管是什么字符串（包括空串、'0')，都转化为true -->
        <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">
        冒号后面指定事件。只用使用Vue对象中自定义的变量、方法，如果使用自带alert()、console.log()这些预置的变量、方法，识别不了 -->
        使用Vue对象中自定义的变量 -->
       <button v-on:click="count++">count++button>
         使用Vue对象中自定义的方法，如果函数有参数，写上参数表 -->
        <button v-on:click="tip1">alertbutton>
        要绑定多个事件时，不能把值写成数组、对象的形式，要使用多个v-on -->
       <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中。