Vue(基础三)_监听器与计算属性

一、前言                                                                                      

本文主要涉及：  1、watch()监听单个属性

                              2、computed可以监听多个属性

                              3、点击li标签切换音乐案例

二、主要内容                                                                               

1、watch()监听器（监听单一数据）

（1）监听简单的数据类型

       new Vue({

           el:'#app',
           data(){
               return {
                   msg:''

               }
           },
           watch:{
               //第一个参数为新数据，第二个参数为老数据
               msg:function(newV，oldV ){
                   console.log(newV,oldV)
               }
           }
       })

（2）对于复杂的数据类型（数组，对象）不能用上面的来监听

<body>
    <div id="app">
        <input type="" name="" v-model='msg'>
        <h4>{{stu[0].name}}</h4>
    </div>

    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>

    <script type="text/javascript">
        
       new Vue({

           el:'#app',
           data(){
               return {
                   msg:'',
                   stu:[{ name: 'jack'}]

               }
           },
           watch:{
               //第一个参数为新数据，第二个参数为老数据
               msg:function(newV,oldV){
                   console.log(newV,oldV)
               },

               stu:{
                   deep:true,
                   hander:function(newV, oldV){
                       console.log(newV[0].name)

                   }
               }
           }
       })
        
    </script>
</body>

2、computed计算属性（可以监听多个属性）

　　（1）计算属性：在computed中定义计算属性的方法，在页面中用{{方法名}}来使用计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_计算属性和监视</title>
</head>
<body>
    <div id="demo">
        姓：<input type="text" name="" placeholder="First Name" v-model="firstName"><br>
        名：<input type="text" name="" placeholder="Last Name" v-model="lastName"><br>

        姓名1：<input type="text" name="" placeholder="Last Name" v-model="fullName1"><br>
        
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script>
        new Vue({
            el:"#demo",
            data:{
                firstName: 'A',
                lastName: 'B',
                //fullName1:'A B'
            },
            computed:{
                //fullName1的值是由前两个属性共同计算得到的
                fullName1(){
                    return this.firstName +" "+this.lastName
                }
            }
        })
    </script>
</body>
</html>
计算属性使用(1).html
/*computed计算属性*/
computed:{
                //fullName1的值是由前两个属性共同计算得到的
                fullName1(){
                    return this.firstName +" "+this.lastName
                }
            },

　　　实现效果（单向改变）：

                        

　　（2）监视属性：通过vm对象的$watch()方法或者watch配置来监听指定的属性，当属性变化时，回调函数自动调用，在函数内部进行计算

　　a:配置监视

//配置监视
watch:{
             firstName:function(newvalue, oldvalue){
                 this.fullName1 =  newvalue + " " + this.lastName
             }
                
      }

　　b:实例方法监视，vue实例中有一个$watch()方法来用于监听

//方法监视
vm.$watch('lastName',function(value){
            this.fullName1 = this.firstName + value
        })

　　结合watch和$watch()也能实现同样的效果

　　（3）计算属性的高级

　　　　a :   通过计算属性get/set实现对属性数据 的显示和监视（双向监听），每个属性都有一个get()和set()方法，下面在computed中给fullName1属性设置set和get方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_计算属性和监视</title>
</head>
<body>
    <div id="demo">
        姓：<input type="text" name="" placeholder="First Name" v-model="firstName"><br>
        名：<input type="text" name="" placeholder="Last Name" v-model="lastName"><br>

        姓名1：<input type="text" name="" placeholder="Last Name" v-model="fullName1"><br>
        
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#demo",
            data:{
                firstName: 'A',
                lastName: 'B'
                
            },
            computed:{          
                fullName1:{
                    //当获取当前属性值的时候自动调用
                    get(){
                        return this.firstName + " " +this.lastName
                    },
                    //当属性值发生改变的时候监听属性值变化，
                    set(value){//value就是fullName1的最新属性值
                        const names = value.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[1]
                    }
                }
            }
        })        
    </script>
</body>
</html>

　　效果：

　　　b:计算属性存在缓存，当多次调用getter的时候，只执行一次，当执行第一次的时候就将数据存在缓存里面。　

3、计算属性实现音乐列表

下面用一个例子来简单说明

点击列表，切换播放的音乐（这个例子不用计算属性也可实现，用了稍微有点绕，这里只是用他来说明计算属性是如何监听多个属性的）

不用计算属性的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;

        }

        ul li{
            height: 100px;
            background-color: blue;
            padding: 20px;
            margin: 10px;
            border-radius: 5px;
        }

        ul li.active {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <audio :src="musicList[this.currentIndex].musicSrc" controls autoplay></audio>
            <ul>
                <li v-for="(item, index) in musicList"  v-on:click='changeMusic(index)'>
                    <h4>{{item.music}}</h4>
                    <h6>{{item.musicSrc}}</h6>
                    <h1>{{index}}</h1>

                </li>
                
            </ul>
        </div>
    </div>

    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var musicList = [
                {id:0, music:'Jeol Adams - Please Dont GO.mp3',author:'Jeol', musicSrc:'./static/Joel Adams - Please Dont Go.mp3'},
                {id:1, music:'MKJ - Time.mp3',author:'MKJ', musicSrc:'./static/MKJ - Time.mp3'},
                {id:2, music:'Russ - Psycho (Pt. 2).mp3',author:'Russ', musicSrc:'./static/Russ - Psycho (Pt. 2).mp3'},
                {id:3,music:'于荣光 - 少林英雄.mp3',author:'于荣光', musicSrc:'./static/于荣光 - 少林英雄.mp3'}
                    
                ]
                
        
    var vm =     new Vue({

            el:"#app",
            data(){
                return{
                    musicList:musicList,
                    currentIndex:0

                }
            },
            
            methods:{
                changeMusic: function(index){
                    console.log(index)
                    return this.currentIndex=index;
                }

            }

        })

        console.log(vm)
    </script>
</body>
</html>
不用计算属性实现音乐列表.html

使用计算属性实现音乐列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;

        }

        ul li{
            height: 100px;
            background-color: blue;
            padding: 20px;
            margin: 10px;
            border-radius: 5px;
        }

        ul li.active {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <audio :src="getCurrentSongSrc" controls autoplay></audio>
            <ul>
                <li v-for="(item, index) in musicList" @click="changeMusic(index)">
                    <h4>{{item.music}}</h4>
                    <h6>{{item.musicSrc}}</h6>

                </li>
                
            </ul>
        </div>
    </div>

    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var musicList = [
                {music:'Jeol Adams - Please Dont GO.mp3',author:'Jeol', musicSrc:'./static/Joel Adams - Please Dont Go.mp3'},
                {music:'MKJ - Time.mp3',author:'MKJ', musicSrc:'./static/MKJ - Time.mp3'},
                {music:'Russ - Psycho (Pt. 2).mp3',author:'Russ', musicSrc:'./static/Russ - Psycho (Pt. 2).mp3'},
                {music:'于荣光 - 少林英雄.mp3',author:'于荣光', musicSrc:'./static/于荣光 - 少林英雄.mp3'}
                    
                ]
                
        
        new Vue({

            el:"#app",
            data(){
                return{
                    musicList:musicList,
                    currentIndex:0

                }
            },
            template:'',
            computed:{

            //    musicList[this.currentIndex].musicSrc
            getCurrentSongSrc: function(){
                return this.musicList[this.currentIndex].musicSrc;
            }


            },
            methods:{
                changeMusic(index){
                    this.currentIndex = index;
                }
            }
        })
    </script>
</body>
</html>
使用计算属性实现音乐列表.html

具体实现：

三、总结                                                                                     

1、点击li标签获取当前li标签的索引：

<ul>
    <li v-for="(item, index) in musicList" @click="changeMusic(index)">
                   
    </li>               
</ul>
methods:{
                clickHandler(index){
                    this.currentIndex = index;
                }
        }
虽然现在走得很慢，但不会一直这么慢
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xxm980617/p/10604418.html