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

Darlingmi

已于 2022-04-10 09:29:54 修改

阅读量529

点赞数 4

分类专栏： Vue 文章标签： vue.js javascript html5

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

本文链接：https://blog.csdn.net/darlingmi/article/details/120142572

版权

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

摘要由CSDN通过智能技术生成

一、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:''
            }

最低0.47元/天解锁文章