事件绑定

有两种绑定事件的方式：

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：完成商城购物车中的商品增加减少数量

步骤：

  1. 给vue对象添加操作数据的方法
  2. 在标签中使用指令调用操作数据的方法
<!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>

　　

posted @ 2021-10-01 20:49  映辉  阅读(89)  评论(0)    收藏  举报