Vue.js入门 0x1 计算属性、v-bind_vue 0乘以数字运算-优快云博客

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

<!--使用计算属性-->
<div id="app">
    {{reversedText}}
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            text:'123,456'
        },
        computed:{
            reversedText:function(){
                return this.text.split(',').reverse().join(',');
            }
        }
    })
</script>

计算属性用法

getter

<div id="app">
    总价：{{prices}}
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            package1:[
                {
                    name:'iPhone 7',
                    price:7199,
                    count:2
                },
                {
                    name:'iPad',
                    price:2888,
                    count:1
                }
            ],
            package2:[
                {
                    name:'apple',
                    price:3,
                    count:5
                },
                {
                    name:'banana',
                    price:2,
                    count:10
                }
            ]
        },
        computed:{
            prices:function(){
                var prices = 0;
                for(var i=0;i<this.package1.length;i++){
                    prices += this.package1[i].price*this.package1[i].count;
                }
                for(var i=0;i<this.package2.length;i++){
                    prices += this.package2[i].price*this.package2[i].count;
                }
                return prices;
            }
        }
    })
</script>

setter

<div id="app">
    姓名：{{fullname}}
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            firstName:'Jack',
            lastName:'Green'
        },
        computed:{
            fullname:{
                //getter,用于读取
                get:function(){
                    return this.firstName+' '+this.lastName;
                },
                //setter,写入时触发
                set:function(newValue){
                    var names = newValue.split(' ');
                    this.firstName = name[0];
                    this.lastName = names[names.length-1];
                }
            }
        }
    });
</script>

计算属性小技巧

计算属性可以依赖其他计算属性；

计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据。

<div id="app1"></div>
<div id="app2">
    {{reversedText}}
</div>
<script>
    var app1 = new Vue({
        el:'#app1',
        data:{
            text:'123,456'
        }
    });
    var app2 = new Vue({
        el:'#app2',
        computed:{
            reversedText:function(){
                return app1.text.split(',').reverse().join(',');
            }
        }
    })
</script>

计算属性缓存

计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值。

v-bind及class与style绑定

绑定class

对象语法

<div id="app">
    <div :class="{'active':isActive}"></div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isActive:true
        }
    })
</script>

对象中也可以传入多个属性，来动态切换 class。另外，：class 可以与普通 class 共存

<div id="app">
    <div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isActive:true
            isError:false
        }
    })
</script>

当： class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用 data 或 computed

<div id="app">
    <div :class="classes"></div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isActive:true,
            error:null
        },
        computed:{
            classes:function(){
                return {
                    active:this.isActive && !this.error,
                    'text-fail':this.error && this.error.type ==='fail'
                }
            }
        }
    })
</script>

数组语法

<!-- 当需要应用多个 class 时， 可以使用数组语法 -->
<div id="app">
    <div :class="[activeCls,errorCls]"></div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            activeCls:'active',
            errorCls:'error'
        }
    })
</script>
<!--也可以使用三元表达式来根据条件切换 class -->
<div id="app">
    <div :class="[isActive?activeCls:'',errorCls]"></div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isActive:true,
            activeCls:'active',
            errorCls:'error'
        }
    })
</script>

绑定内联样式

使用 v-bind:style （即：style ）可以给元素绑定内联样式，方法与：class 类似，也有对象语法和数组语法，看起来很像直接在元素上写 CSS

<div id="app">
    <div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            color:'red',
            fontSize:14
        }
    })
</script>

<!-- 大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或computed里-->
<div id="app">
    <div :style="styles">文本</div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            styles:{
                color:'red',
                fontSize:14+'px'
            }
        }
    })
</script>