vue基礎(chǔ)之事件v-onclick="函數(shù)"用法示例

2019-11-19 12:00:49

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了vue基礎(chǔ)之事件v-onclick=函數(shù)用法。分享給大家供大家參考，具體如下：

v-on:click/mouseout/mouseover/dblclick/mousedown.....

事件:

v-on:click="函數(shù)"
v-on:click/mouseout/mouseover/dblclick/mousedown.....

new Vue({  el:'#box',  data:{ //數(shù)據(jù)    arr:['apple','banana','orange','pear'],    json:{a:'apple',b:'banana',c:'orange'}  },  methods:{    show:function(){  //方法，這里是show，不能用alert      alert(1);    }  }});

實(shí)例：為data添加數(shù)據(jù)

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.survivalescaperooms.com 為data添加數(shù)據(jù)</title>  <style>  </style>  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>  <script>    window.onload=function(){      new Vue({        el:'#box',        data:{ //數(shù)據(jù)          arr:['apple','banana','orange','pear'],          json:{a:'apple',b:'banana',c:'orange'}        },        methods:{          add:function(){            this.arr.push('tomato');//this指代new Vue()，也是data          }        }      });    };  </script></head><body>  <div id="box">    <input type="button" value="按鈕" v-on:dblclick="add()">    <br>    <ul>      <li v-for="value in arr">        {{value}}      </li>    </ul>  </div></body></html>

運(yùn)行效果：

實(shí)例：點(diǎn)擊按鈕，div顯示/消失，切換。v-show="a"

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.survivalescaperooms.com 點(diǎn)擊按鈕，div顯示/消失，切換。v-show="a"</title>  <style>  </style>  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>  <script>    window.onload=function(){      new Vue({        el:'#box',        data:{ //數(shù)據(jù)          a:true        },        methods:{          adjust:function(){            console.log(this.a);            if(this.a == true){              this.a = false;            }else{              this.a = true;            }          }        }      });    };  </script></head><body>  <div id="box">    <input type="button" value="按鈕" v-on:click="adjust()">    <div style="width:100px; height:100px; background: red" v-show="a">    </div>  </div></body></html>

實(shí)例：vue簡(jiǎn)易留言本

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.survivalescaperooms.com vue簡(jiǎn)易留言本</title>  <style>  </style>  <link rel="stylesheet"  rel="external nofollow" >  <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>  <script src="https://cdn.bootcss.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>  <script>    window.onload=function(){      new Vue({        el:'#box',        data:{          myData:[],          username:'',          name:'',          age:'',          nowIndex:-100        },        methods:{          add:function(){            this.myData.push({              name:this.username,              age:this.age            });            this.username='';            this.age='';          },          deleteMsg:function(n){            if(n==-2){              this.myData=[];            }else{              this.myData.splice(n,1);            }          }        }      });    };  </script></head><body>  <div class="container" id="box">    <form role="form">      <div class="form-group">        <label for="username">用戶(hù)名:</label>        <input type="text" id="username" class="form-control" placeholder="輸入用戶(hù)名" v-model="username">      </div>      <div class="form-group">        <label for="age">年　齡:</label>        <input type="text" id="age" class="form-control" placeholder="輸入年齡" v-model="age">      </div>      <div class="form-group">        <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">        <input type="reset" value="重置" class="btn btn-danger">      </div>    </form>    <hr>    <table class="table table-bordered table-hover">      <caption class="h3 text-info">用戶(hù)信息表</caption>      <tr class="text-danger">        <th class="text-center">序號(hào)</th>        <th class="text-center">名字</th>        <th class="text-center">年齡</th>        <th class="text-center">操作</th>      </tr>      <tr class="text-center" v-for="(item,index) in myData">        <td>{{index+1}}</td>        <td>{{item.name}}</td>        <td>{{item.age}}</td>        <td>          <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">刪除</button>        </td>      </tr>      <tr v-show="myData.length!=0">        <td colspan="4" class="text-right">          <button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer" >刪除全部</button>        </td>      </tr>      <tr v-show="myData.length==0">        <td colspan="4" class="text-center text-muted">          <p>暫無(wú)數(shù)據(jù)....</p>        </td>      </tr>    </table>    <!--模態(tài)框 彈出框-->    <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">      <div class="modal-dialog">        <div class="modal-content">          <div class="modal-header">            <button type="button" class="close" data-dismiss="modal">              <span>×</span>            </button>            <h4 class="modal-title">確認(rèn)刪除么?</h4>          </div>          <div class="modal-body text-right">            <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>            <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">確認(rèn)</button>          </div>        </div>      </div>    </div>  </div></body></html>

運(yùn)行效果：