有两种绑定事件的方式:
v-on:事件名(vue1版本) @事件名(vue2以上版本)
格式:
<标签名 @事件名="方法或者基本JS代码">标签内容</标签名>
例子:
<div id="box"> <div @click="func01">姓名:{{name}}</div> <div @click="func02">年龄:{{age}}</div> </div> <script> vm = new Vue({ el:"#box", data(){ return { name:"yuan", age:"22" } }, // vue的操作方法,这里的方法都是用于被其他地方调用,自己不会自动执行 // 方法不能和data中的变量数据重名,否则报错!!! methods: { func01(){ this.name = "rain" }, func02(){ this.age = 30 }, } }) </script>
说明:
1. 基本都是使用@事件名来进行事件的绑定 语法: <h1 @click="num++">{{num}}</h1> 2. 绑定的事件的事件名,全部都是js的事件名: @submit ---> onsubmit @focus ---> onfocus @blur ---> onblur @click ---> onclick
案例01:显示WIFI密码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue-2.6.14.js"></script> </head> <body> <div id="box"> 密码:<input :type="type"><button @click="show">{{message}}</button> </div> <script> const vm = new Vue({ el:"#box", data(){ return { type: "password", message: "显示", } }, // vue的操作方法,这里的方法都是用于被其他地方调用,自己不会自动执行 // 方法不能和data中的变量数据重名,否则报错!!! methods: { show(){ // 在方法内部调用其他的方法或者data数据的化,可以直接通过 this.方法() 或者 this.变量名 // console.log(this.message); // this.func(); if( this.type == "password" ) { this.type="text"; this.message="隐藏"; }else{ this.type="password"; this.message="显示"; } }, } }) </script> </body> </html>
案例02:完成商城购物车中的商品增加减少数量
步骤:
- 给vue对象添加操作数据的方法
- 在标签中使用指令调用操作数据的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { font-size: 14px; } table, tr, th, td { border: 1px solid red; border-collapse: collapse; /* 合并边框 */ } th, td { width: 200px; text-align: center; /* 文本水平居中 */ height: 30px; line-height: 30px; } input { width: 80px; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script> </head> <body> <div id="app"> <table> <tr> <th>商品ID</th> <th>商品标题</th> <th>商品库存</th> <th>商品单价</th> <th>购买数量</th> <th>商品小计</th> </tr> <tr> <td>1003</td> <td>《python入门到放弃》</td> <td>{{max_num}}</td> <td>98.50</td> <td> <button @click="sub">-</button> <input type="text" v-model.number="num" id=""> <button @click="add">+</button> </td> <td>492.50</td> </tr> </table> </div> <script> const vm = new Vue({ el: "#app", data() { return { num: 1, max_num: 7, } }, methods: { sub() { // 减少数量 if (this.num > 1) { // this.num = this.num - 1; this.num -= 1; } }, add() { // 增加数量 if (this.num < this.max_num) { // this.num = this.num + 1; this.num += 1; } } } }) </script> </body> </html>