Vue的监视属性

最新推荐文章于 2024-09-11 14:27:41 发布

小乔要努力变强_

最新推荐文章于 2024-09-11 14:27:41 发布

阅读量64

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xhnlbq/article/details/134315041

版权

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
Vue的监视属性和计算属性的区别

文章目录

系列文章目录
前言
一、监视属性和计算属性的区别
二、实例
- 1.监视属性
- 2.计算属性
结果

前言

提示：这里可以添加本文要记录的大概内容：

Vue的监视属性语法，改如何运用

一、监视属性和计算属性的区别

下面我直接用案例来一起看这两个的区别

二、实例

1.监视属性

代码如下（示例）：

<body>
    <div class="root">
        <h1>{{title}}</h1>
        <input placeholder="请输入关键字" v-model="keyword" />
        <ul v-for="x,y in newarr" :key="x.id">
            <li>{{x.name}}-{{x.age}}-{{x.sex}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'.root',
        data:{
            keyword:'',
            title:'人员列表',
            arr:[
                {id:'1',name:'周冬雨',age:'18',sex:'女'},
                {id:'2',name:'周杰伦',age:'19',sex:'男'},
                {id:'3',name:'李冬梅',age:'20',sex:'女'},
                {id:'4',name:'温兆伦',age:'22',sex:'男'}
            ],
            newarr:[]
        },
        watch:{
            keyword:{
                immediate:true,//初始就会调用
                handler(val){//可以获得新旧两个值
                    this.newarr = this.arr.filter((y)=>{
                        return y.name.indexOf(val) !== -1
                    })
                }
            }
        }
        
    })
</script>

2.计算属性

代码如下（示例）：

<script type="text/javascript">
    new Vue({
        el:'.root',
        data:{
            keyword:'',
            title:'人员列表',
            arr:[
                {id:'1',name:'周冬雨',age:'18',sex:'女'},
                {id:'2',name:'周杰伦',age:'19',sex:'男'},
                {id:'3',name:'李冬梅',age:'20',sex:'女'},
                {id:'4',name:'温兆伦',age:'22',sex:'男'}
            ],
        },
        computed:{
            newarr(){
                return this.arr.filter((y)=>{
                    return y.name.indexOf(this.keyword) !== -1
                })
            }
        }
        
    })
</script>