Vue计算属性、监听器、过滤器、class style绑定

原创已于 2022-04-10 09:29:54 修改 · 634 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #html5

于 2021-09-06 19:43:28 首次发布

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了Vue.js中的计算属性、监听器和过滤器的用法。计算属性用于处理复杂逻辑，有缓存机制；监听器在数据变化时执行异步操作，适用于频繁变化的数据；过滤器主要用于文本格式化和数据过滤。同时，文章还探讨了class和style的动态绑定方式。

文章目录

一、Vue的计算属性
- 计算属性的缓存
二、Vue的监听器
- 计算属性和侦听器区别
三、class的绑定
四、style的绑定
五、Vue 的过滤器

一、Vue的计算属性

computed，是以函数形式来实现数据计算功能，函数都必须写在computed属性下。
在 Vue 应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，比如

<div>{{text.split(',').reverse().join(',')}}</div>

这里表达式包含三个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性。上例可以用计算属性进行改写：

computed: {
  ReversedText: function (){//所有计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果
    return this.text.split(',').reverse().join(',')
   }
}

计算属性的缓存

一个计算属性所依赖的数据发生变化时，他才会重新取值，所以依赖的数据只要不改变，计算属性也就不更新。使用计算属性还是 methods 取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性。

<body>
    <div id='app'>
        <label>
            firstname:<input type="text" v-model='firstname'>
        </label><br><br>
        <label>
            lastname:<input type="text" v-model='lastname'>
        </label><br><br>
        全名：{{fullname}}
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                firstname:'',
                lastname:''
            },
            computed:{
                fullname:{
                    get:function(){//获取
                        return this.firstname+'  '+this.lastname

                    },
                    set:function(newValue){//重置
                        let names = newValue.split('  ');
                        this.firstname=names[0];
                        this.lastname=names[1];

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

二、Vue的监听器

watch — 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<body>
    <div id='app'>
        <input type='text' v-model='message'><br><br>
        <h2>{{state}}</h2>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'hello',
                state:'[未修改]'
            },
            watch:{
                message:function(e){//监听message的变化
                    console.log(e);
                    this.state='[已修改]';
                }
            }
        })
    </script>
</body>

计算属性和侦听器区别

计算属性特点

当我们定义一个计算属性的时候，计算属性是一个函数，最后函数返回的结果就是计算属性得到的结果。当我们去第一次使用计算属性的时候，会执行计算属性并进行计算，然后将计算的结果缓存起来。后续当我们再去使用计算属性的时候，如果计算属性中使用到的数据没有发生变化，那么就会直接读取缓存的结果，不会重新计算。

侦听器特点

当我们定义一个侦听器的时候，侦听器与data中的属性同名，当属性的值发生改变的时候，侦听器被触发执行。一个侦听器对应data中的一个属性，当属性发生变化时触发侦听器的执行。

使用场景

数据如果会反复的发生变化，计算很多次的情况下，计算属性的开销将会更大，也就意味着这种情况不适合使用计算属性，适合使用侦听器。那么，如果一个数据反复会被使用，但是它计算依赖的内容很少发生变化的情况下，计算属性会缓存结果，就更加适合这种情况。
注意：computed的结果是通过return返回的，而watch不需要return。watch中的参数可以得到侦听属性改变的最新结果，而computed函数没有这种参数。

三、class的绑定

可以传给 v-bind:class 一个对象，以动态地切换 class：

<style>
    div{
        width: 100px;
        height: 100px;
    }
    .red{
        background-color: red;
    }
    .border{
        border:1px solid black;
    }
    .radius{
        border-radius: 50%;
    }
</style>
<body>
    <div id='app'>
        <div v-bind:class='classObj'></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                classObj:{
                    red:true,
                    border:true,
                    radius:true
                }
            }

        })
    </script>
</body>

四、style的绑定

1、直接绑定

v-bind:style 的对象语法十分直观 ——看着非常像 CSS ，但其实是一个 JavaScript 对象。 CSS式属性名可以用驼峰式或短横线分隔来命名。

2、对象绑定

 v-bind:style="styleObject"
 new Vue({
      el:'#app',
      data:{
      styleObject: { }
 };

3、计算属性绑定

new Vue({
    el:'#app',
    data:{
    bl:false
    },
computed:{
   computeStyle(){
       return{
             color:this.bl?'red':'blue',
             fontSize:this.bl?'20px':'50px',
             fontWeight:this.bl?'bold':'normal'
        }
                  }
      }
});

五、Vue 的过滤器

主要用于文本的格式化，或者数组数据的过滤与排序等。

1、语法

   <!-- 在双花括号中 --> 
		{{ message | capitalize }} 
		
<!-- 在 `v-bind` 中 --> 
		<div v-bind:id="rawId | formatId"></div>

2、分类

(1)全局过滤器

使用 Vue.filter()方法来注册，该方法接收两个参数，第一个参数是过滤器的ID(即名字), 第二个参数是一个函数对象，过滤器要实现的功能在这个函数中定义。

强调：定义位置必须在程序的开始。

<div id="app">
	<input type="text" v-model="message" />
	{{ message | myfilter }}
</div>
<script>
	//创建(注册)一个全局的过滤器
	Vue.filter('myfilter',function(value){
		if(!value){ //参数'value'为空
			return ''
		}
		value = value.toString();
		return value.toUpperCase();
	})

	new Vue({
		el: '#app',
		data: {
			message: 'javascript'
		}
	})
</script>

(2)局部过滤器

是在 Vue 实例中挂载filters 属性来注册。

 new Vue({
            el: '#app',
            data: {
                message: 'javascript'
            },
            filters: {  //局部过滤器：给Vue实例挂载filters属性
                myfilter: function(value){
                    if(!value){
                        return ''
                    }
                    value= value.toString();
                    return value.toUpperCase();
                }
            }
        })