Veeスタイルバインド、イベントバインド

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に置くことができます.