Vue.js 3.0 学习笔记（五）精通监听器

本文链接：https://blog.csdn.net/qq_44648936/article/details/123429069

一、使用监听器

监听器在Vue实例的watch选项中定义

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用监听器</title>
</head>
<body>
<div id="app">
    时：<input type="text" v-model="time">
    分钟：<input type="text" v-model="minute">
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             time:0,
             minute:0
           }
        },
        watch:{
           time(val) {
    	     this.minute = val * 60;
              },
           // 监听器函数也可以接受两个参数，val是当前值，oldVal是改变之前的值
            minute(val, oldVal) {
    	     this.time = val / 60;
              }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

两边绑定，一边变化都会导致另一边变化
在这里插入图片描述

二、监听方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>监听方法</title>
</head>
<body>
<div id="app">
    <p>元和角的转换</p>
    <p>元：<input type="text" v-model="yuan"></p>
    <p>角：<input type="text" v-model="jiao"></p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             yuan:0,
             jiao:0
           }
        },
        methods:{
            method1:function (val,oldVal) {
                this.jiao=val*10;
            },
            method2:function (val,oldVal) {
                this.yuan=val/10;
            }
        },
        watch:{
            //监听yuan属性，yuan变化时，使jiao属性等于yuan*10
            yuan:"method1",
            //监听jiao属性，jiao变化时，使val属性等于jiao/10
            jiao:"method2"
        }
     //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

三、监听对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>监听对象</title>
</head>
<body>
<div id="app">
    商品价格：<input type="text" v-model="goods.price">
    <p>{{pess}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             pess:'',
            goods: {
                name: '洗衣机',
                price:0
             }
           }
        },
        watch: {
            goods:{
                //该回调函数在goods对象的属性改变时被调用
                handler: function(newValue,oldValue){
                    if(newValue.price>=8000){
                        this.pess="价格太贵了，不可以采购！";
                    }
                    else{
                        this.pess="价格合适，可以采购！";
                    }
                },
                //设置为true，无论属性被嵌套多深，改变时都会调用handler函数
                deep:true
            }
        }
     //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>

</body>
</html>

监听对象的单个属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>监听对象的单个属性</title>
</head>
<body>
<div id="app">
    商品产地：<input type="text" v-model="goods.city">
    <p>{{pess}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             pess:'',
            goods: {
                name: '洗衣机',
                city:''
             }
           }
        },
        watch: {
           //监听goods对象的city属性，因为有点号.所以需要用单引号或双引号包裹起来
            'goods.city':{
                handler: function(newValue,oldValue){
                    if(newValue == "上海"){
                        this.pess="商品的产地是上海！";
                    }
                    else{
                        this.pess="商品的产地不是上海！";
                    }
                },
                //设置为true，无论属性被嵌套多深，改变时都会调用handler函数
                deep:true
            }
        }
     //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

四、综合案例——使用监听器设计购物车效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车效果</title>
</head>
<body>
<div id="app">
      <div>商品名称：<input v-model="name"/></div>
      <button v-on:click="cut">减一个</button>
           购买数量{{count}}
      <button v-on:click="add">加一个</button>
      <button v-on:click="addCart">加入购物车</button>
      <div v-for="(item, index) in list" :key="index">
           {{item.name}}  x{{item.count}}
      </div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             name: '',
             count:0,
             isMax: false,
            list: []
           }
        },
      methods: {
        cut() {
          this.count = this.count - 1
          this.isMax = false
        },
        add() {
          this.count = this.count + 1
        },
        addCart() {
          this.list.push({
            name: this.name,
            count: this.count
          })
        }
      },
      watch: {
        count: function(newVal, oldVal) {
          if(newVal > 10) {
            this.isMax = true
          }
          if(newVal < 0) {
            this.count = 0
          }
        },
        name: function() {
          this.count = 0,
          this.isMax = false
        }
     }
     //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

在这里插入图片描述