【Vue】-(5) 计算属性与class,style绑定
2016-04-26 10:20
841 查看
计算属性:
var vm=new Vue({
el:'#app',
data:{
a:2,
},
computed:{
//这里的b是计算属性:默认getter
b:{
get:function(){
return this.a+1
},
set:function(newValue){
this.a=newValue-3
}
}
}
});
console.log(vm.b);//3
vm.a=3;
console.log(vm.b);//4
vm.b=8; //设置vm.b=8会调用set方法,vm.a变为5
console.log(vm.a);//5
Class与Style的绑定
var vm=new Vue({
el:'#app',
data:{
a:2,
},
computed:{
//这里的b是计算属性:默认getter
b:{
get:function(){
return this.a+1
},
set:function(newValue){
this.a=newValue-3
}
}
}
});
console.log(vm.b);//3
vm.a=3;
console.log(vm.b);//4
vm.b=8; //设置vm.b=8会调用set方法,vm.a变为5
console.log(vm.a);//5
Class与Style的绑定
<!-- Class绑定 --> 1.v-bind:class和普通属性class可以并存(对象语法) <div class="static" v-bind:class="{'classA':isA,'classB':isB}"></div><br /> 渲染为:<div class='static classA classB'></div> 2.可以直接绑定数据里面的一个对象 <div v-bind:class="classObject"></div> 渲染为:<div class="class-c"></div><br /> 3.传递数组给:class(数组语法) <div :class="[classA,classB]"></div> 渲染为:<div class="class-a class-b"></div> <br /><br /> <!-- Style绑定 --> 1.对象语法 <div :style="{color:activeColor,fontSize:fontSize+'px'}">Test</div> <div :style="styleObject">Test</div> 2.数组语法 <div :style="[styleObjectA,styleObjectB]"></div>
相关文章推荐
- html5 web数据存储
- SEO
- 异步流程控制:7 行代码学会 co 模块
- [译] React 入门
- 如何优雅处理前端异常?
- 深入探讨前端框架react
- Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
- 自己动手写的javascript前端等待控件
- 前端必备神器 Snap.svg 弹动效果
- vue,angular,avalon这三种MVVM框架优缺点
- Vue入门之数据绑定(小结)
- 一张Web前端的思维导图分享
- 一道常被人轻视的web前端常见面试题(JS)
- 浅谈AngularJS--基础
- 浅谈AngularJS--域变量(scope)
- AngularJS' Internals In Depth(深入理解 AngularJS)
- 3ff8 javascript 获取Flash下载进度兼容IE, FireFox,Chrome浏览器
- CSS清除浮动常用方法小结
- window.external 的用法(收藏夹功能)