vue.js之绑定class和style
一.绑定Class属性。
绑定数据用v-bind:命令,简写成:
语法:<div v-bind:class="{ active: isActive }"></div>。class后面的双引号里接受一个对象字面量/对象引用/数组作为参数,
这里,{active: isActive}是对象参数,active是class名,isActive是一个布尔值。下面是一个例子:
绑定对象字面量
html:
<div id="classBind">
<span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle">
状态:{{alert}}{{isSafe}}
</span>
</div>
//js
var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['红色警报','警报解除'],
alert:''
},
computed:{
isSafe:function(){
return !this.isWarning;
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
} });
css:
.warning{
color:#f24;
}
.safe{
color:#42b983;
}
当点击状态文字时,可以切换后面的文字和颜色
//状态:警报解除true
//状态:红色警报false
绑定对象引用
这里绑定的对象可以写到Vue实例的data里面,而在class="classObj ",双引号中的class是对Vue实例中classObj对象的引用。classObj可以放在data中或者computed中,如果在computed中,则classObj所对应的函数必须返回一个对象如下:
js:
var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['红色警报','警报解除'],
alert:''
},
computed: {
isSafe: function () {
return !this.isWarning;
},
classObj:function(){
return {
warning: this.isWarning,
safe:this.isSafe
}
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
} });
绑定数组
html:
<div v-bind:class="classArray" @click="removeClass()">去掉class</div>
js
data: {
classArray:["big",'red']
}
methods:{
removeClass:function(){
this.classArray.pop();
}
}
css:
.big{
font-size:2rem;
}
.red{
color:red;
}
效果,点击去掉class,会调用removeClass函数,去掉classArray数组的最后一项,第一次,去掉'red',字体颜色由红变黑,再点,去掉'big',字体变小。
二、绑定内联style
此时此刻,我一边看着本页旁边的那个Vue api文档学,一边到这里卖,装逼的感觉真爽o(^▽^)o
html
<div id="styleBind">
<span :style="{color:theColor,fontSize:theSize+'px'}" @click="bigger">styleBind</span>
</div>
css
这个不需要css。。。
js
var app12=new Vue({
el:'#styleBind',
data:{
theColor:'red',
theSize:14
},
methods:{
bigger:function(){
this.theSize+=2;
}
} });
除了传入对象字面量以外,也可以传入对象引用和数组给V-bind:style
vue.js之绑定class和style的更多相关文章
- vue.js样式绑定
vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...
- 10.Vue.js 样式绑定
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定原理
Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...
- vue.js双向绑定之--select获取text
在大多数情况下select下拉菜单都是value和text设置不同的值的,value一般来说是与后台交互的值,而text是前端用来显示的文本: 但是,vue.js对到表单的双向绑定时如果option设 ...
- Vue.js 样式绑定(1)
demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- vue.js中内联样式style三元表达式
<span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...
- vue.js 样式绑定
简单用法 <div v-bind:height="bindStyle"> 复杂用法 <div v-bind:style="bindStyle" ...
随机推荐
- 【代码笔记】iOS-下拉选项cell
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> //加入头文件 #import "ComboBo ...
- OC 类簇与复合
OC 类簇与复合 类簇: 类簇是Foundation框架中广泛使用的设计模式.类簇将一些私有的.具体的子类组合在一个公共的.抽象的超类下面,以这种方法来组织类可以简化一个面向对象框架的公开架构,而又不 ...
- iOS NSString中的搜索方法rangeOfString
NSString *str = @"your://aaa?backscheme=my"; //在str中查找“backscheme=”,并返回一个NSRange类型的值,我们可以通 ...
- 学习Swift的点点滴滴
1.类型标注 之前不知道为啥别人写的Swift语言的时候,定义常量或者变量的格式是 常量: let 常量名: 常量类型 = 常量值 或者 变量: var 变量名: 变量类型 = 初始值 原来书上有记 ...
- ORA-10635: Invalid segment or tablespace type
上周星期天在迁移数据时,碰到了ORA-10635: Invalid segment or tablespace type 错误,当时的操作环境如下: 操作系统版本: [oracle@xxxxx scr ...
- Linux tmp目录自动清理总结
在Linux系统中/tmp文件夹下的文件是会被清理.删除的,文件清理的规则是如何设定的呢? 以Redhat为例,这个主要是因为作业里面会调用tmpwatch命令删除那些一段时间没有访问的文件. 那么什 ...
- UNIX系统的显示时间何时会到达尽头
本文分为三个小块: 一.UNIX系统中时间的存储形式: 二. time_t 的最大值是多少: 三. 将time_t 的最大值转化为真实世界的时间: #---------------------# # ...
- JSP分页显示实例(基于Bootstrap)
首先介绍一款简单利落的分页显示利器:bootstrap-paginator 效果截图: GitHub官方下载地址:https://github.com/lyonlai/bootstrap-pagina ...
- 足球游戏论坛数据分析--简单粗暴的K均值聚类
在<<足球游戏论坛数据分析--简单粗暴的贝叶斯>>中尝试了贴标签后,一直觉得结果无法接受, 慢慢回想, 其实选择的算法是错误的,原因有 论坛帖子分类并非就是PC/PS/XBOX ...
- mysql while,loop,repeat循环,符合条件跳出循环
1.while循环 DELIMITER $$ DROP PROCEDURE IF EXISTS `sp_test_while`$$ CREATE PROCEDURE `sp_test_while`( ...