Vue中事件繫結
阿新 • • 發佈:2018-11-27
1.滑鼠劃過操作hover 2.新增一個滑鼠點選事件v-on:click="aaa(0)" 可以寫成@click="aaa(0)" <div>{{activeindex}}</div> activeIndex=null 設定初始值為空 3.給aaa新增一個方法 method:{ aaa(index)={this.activeindex=index}; 滑鼠一點選 讓div裡的值等於aaa()裡index的值 4.class樣式繫結:<div :class="{item ,active }"></div> data(){ return{ item:true, active:true } } item設定div裡的樣式,active設定點選後的顏色 5.v-text與v-html <span> {{message}} =<span v-text="message"></span> </span> data:{ message:'Hello' } <span v-html="msg"></span> data:(msg:'<h2>Hello World</h2>') 6.v-on 繫結事件監聽:編寫一個加分減分的程式 <div> 本場比賽得分{{count}} <button v-on:click="jiafen">加分</botton> <button v-on:click="jianfen">減分</botton> </div> data:( count:1; ) methods:{ jiafen:function(){ this.count++; } } <button @click="jianfen">減分</button> v-on:click簡寫@click v-on除了繫結click,還可以繫結鍵盤迴車事件v-on:keyup.enter