master

分支 (1)

管理

管理

master

wustudy
/
5.v-on.html

<body>
    <!-- 2.html结构 -->
    <div id="app">
       <input type="button" value="v-on单击" v-on:click="doIt">
       <input type="button" value="v-on双击" v-on:dblclick="doIt">
       <input type="button" value="v-on简写" @click="doIt">
       <input type="button" value="v-on双击" @dblclick="doIt">
       <h2 @click="changeFood">{{food}}</h2>
    </div>
     <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 3.创建Vue实例 -->
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                 food:"西兰花炒蛋"
             },
            methods:{
                doIt:function(){
                    alert("执行v-on");
                },
                changeFood:function(){
                    console.log(this.food);
                    this.food+="好好吃！"
                }
            },
         })
     </script>
</body>