Vue计算属性及样式绑定

Posted 2022-07-12 遥岑.

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue计算属性及样式绑定相关的知识，希望对你有一定的参考价值。

计算属性

例子

模板内的表达式非常便利，但在模板中放入太多逻辑会让模板过重难以维护。对于任何复杂逻辑，都可以使用计算属性。

<body>
    <div id="example">
        <p>message</p>
        <p>reversedMessage</p>
    </div>
</body>
<script>
    var vm = new Vue(
        el:'#example',
        data:
            message:'hello'
        ,
        computed:
            //计算属性的getter
            reversedMessage:function() 
                return this.message.split('').reverse().join('')
            
        
    )
</script>

vm.reversedMessage依赖于vm.message，当 vm.message发生变化时，依赖vm.reversedMessage的绑定也会更新。

计算属性缓存

当然也可以在表达式中调用方法来达到同样的效果。

<body>
    <div id="example">
        <p>message</p>
        <p>reversedMessage()</p>
    </div>
</body>
<script>
    var vm = new Vue(
        el:'#example',
        data:
            message:'hello'
        ,
        methods:
            reversedMessage:function() 
                return this.message.split('').reverse().join('')
            
        
    )
</script>

我们也可以将同一函数定义为一个方法而不是一个计算属性，他们的结果是相同的，不同的是计算属性是基于他们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时才会重新求值。
也就是说，只要message不变，多次访问reversedMessage计算属性会立即返回之前的计算结果，不必再次执行函数。
缓存可以帮助我们减少计算的工作量，如果不希望有缓存，可以用方法来替代。

计算属性的setter

计算属性默认只有getter，但在需要时也可以提供setter。

<body>
    <div id="app">
        <p>fullName</p>
    </div>
</body>
<script>
    var vm = new Vue(
        el:'#app',
        data:
            firstName:'遥',
            lastName:'岑'
        ,
        computed:
            fullName: 
                get:function() 
                    return this.firstName + '' + this.lastName
                ,
                set:function(val) 
                    var names = val.split('')
                    this.firstName = names[0]
                    this.lastName = names[names.length-1]
                
            
        
    )
</script>

运行vm.fullName = 'John Doe'时，setter会被调用。

侦听器

Vue通过watch提供了一个更通用的方法来响应数据的变化，可以用于数据变化时执行异步或开销较大的操作。

<body>
    <div id="example">
        <p>
            <input v-model="question">
        </p>
        <p>answer</p>
    </div>
</body>
<script>
    var vm = new Vue(
        el:'#example',
        data:
            question:'',
            answer:'i cannot give you an answer until you ask a question'
        ,
        watch:
            //question改变，函数运行
            question:function(newQ,oldQ) 
                this.answer = 'waitting...'
            
        
    )
</script>

Class和Style绑定

操作元素的class列表和内联样式是数据绑定的一个常见需求，我们可以用v-bind处理。

绑定Class

对象语法

我们可以传给v-bind:class一个对象，以动态地切换class。
v-bind:class指令可以和普通的class属性共存。

<body>
    <!-- 对象语法 -->
    <div class="static" v-bind:class="active:isActive,test:hasError"></div>
</body>
<script>
    var vm = new Vue(
        el:'.static',
        data:
            isActive:true,
            hasError:false
        
    )
    //渲染
    //<div class='static active'></div>
</script>

当isActive或test变化时，class列表将相应地更新。
绑定的数据对象不必内联定义。

<body>
    <div class="static" v-bind:class="classObj"></div>
</body>
<script>
    var vm = new Vue(
        el:'.static',
        data:
            classObj: 
                active:true,
                test:false
            
        
    )
</script>

也可以绑定一个返回对象的计算属性。

<body>
    <div class="static" v-bind:class="classObj"></div>
</body>
<script>
    var vm = new Vue(
        el:'.static',
        data:
            isActive:true,
            error:null
        ,
        computed:
            classObj:function() 
                return 
                    active:this.isActive && !this.error,
                    test:this.error && this.error.type === 'fatal'
                
            
        
    )
</script>

数组语法

<body>
    <div class="exm" v-bind:class="[activeClass,errorClass]"></div>
</body>
<script>
    var vm = new Vue(
        el:'.exm',
        data:
            activeClass:'active',
            errorClass:'danger'
        
    )
    //渲染
    //<div class="exm active danger"></div>
</script>

也可以在class中使用三元表达式，也可以在数组中使用对象语法。

绑定内联样式

对象语法

v-bind:style是一个js对象。

<body>
    <div v-bind:style="color:activeColor,fontSize:fontSize+'px'">11</div>
</body>
<script>
    var vm = new Vue(
        el:'div',
        data:
            activeColor:'blue',
            fontSize:30
        
    )
</script>

直接绑定到样式对象。

<body>
    <div v-bind:style="styleObj">11</div>
</body>
<script>
    var vm = new Vue(
        el:'div',
        data:
            styleObj:
                color:'blue',
                fontSize:'13px'
            
        
    )
</script>

数组语法

<body>
    <div v-bind:style="[styleObj,overStyle]">11</div>
</body>
<script>
    var vm = new Vue(
        el:'div',
        data:
            styleObj:
                color:'blue',
                fontSize:'13px'
            ,
            overStyle:
                backgroundColor:'yellow'
            
        
    )
</script>