vue.js学习笔记之绑定style样式和class列表

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

一.绑定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学习笔记之绑定style和class，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 学习vue.js中class与style绑定

    关于vue.js中class与style绑定的练习代码,分享给大家,供大家参考: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs中Class与Style 绑定</title> <link rel="stylesheet" href="css/vu

  • vue.js绑定class和style样式（6）

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 通过 v-bind:class 或者 :class 来为style或者class来绑定 绑定class <div class="test">

  • 详解vue.js之绑定class和style的示例代码

    一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }"></div>.class后面的双引号里接受一个对象字面量/对象引用/数组作为参数, 这里,{active: isActive}是对象参数,active是class名,isActive是一个布尔值.下面是一个例子: 绑定对象字面量 html: <div id="classBind">

  • Vue的Class与Style绑定的方法

    本文介绍了Vue的Class与Style绑定,分享给大家,具体如下: 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <style> .exp{ border: 1px solid #ccc; } .forExp{ background: blue; } </style> <div class="exp" v-bind:class="{newExp:isNewExp}"

  • vue.js入门教程之绑定class和style样式

    一.前言 相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 二.绑定 HTML Class 请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}&quo

  • vue.js学习笔记之绑定style样式和class列表

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q

  • vue.js学习笔记之v-bind和v-on解析

    v-bind 指令用于响应地更新 HTML 特性 形式如:v-bind:href    缩写为    :href; v-on 指令用于监听DOM事件 形式如:v-on:click  缩写为 @click; <body> <div id="test"> <img v-bind:src="src"> <a v-bind:href="url" rel="external nofollow"

  • Vue.js学习笔记之 helloworld

    Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. 先来看一个简单的示例,Hello,World! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue学习</title> <script src="/vue/1.0.11/vue.m

  • Vue.js学习笔记之修饰符详解

    Vue.js学习笔记之修饰符详解

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点"."连接修饰符名称. 一.v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令.在 <input> 和 <textarea> 上,默认通过监听元素的 input 事件来更新绑定的属性值. 为了能明显的看到绑定属性值的变化,需要在Chrome浏览器中安

  • Vue.js学习笔记之常用模板语法详解

    Vue.js学习笔记之常用模板语法详解

    本文介绍了Vue.js 常用模板语法,分享给大家,具体如下: 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化. 实时渲染 <div class="row"> <h2>文本 - 实时渲染</h2> <input type="text" v-model="msg" class=&quo

  • vue.js学习笔记:如何加载本地json文件

    vue.js学习笔记:如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来.(此时项目是由webpack打包而成). 整个项目是由webpack打包而成.具体项目结构如下: 1:打包好的文件在此,http://pan.baidu.com/s/1dFCAzux 2:我们找到bulid>dev-server.js,然后打开 3:在里面加入这

  • JS学习笔记之贪吃蛇小游戏demo实例详解

    本文实例讲述了JS学习笔记之贪吃蛇小游戏demo实例.分享给大家供大家参考,具体如下: 最近跟着视频教程打了一个贪吃蛇, 来记录一下实现思路, 先上代码 静态页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>贪吃蛇</title> </head> <style> *{ mar

  • WebGL学习教程之Three.js学习笔记(第一篇)

    webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染. WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏. 原生的WebGl比较复杂,主要通过对顶点着色器和片元着色器的操作,来实现渲染,但实现起来比较复杂,需要一定的数学基础,但更多的是需要学习

  • WebGL three.js学习笔记之阴影与实现物体的动画效果

    实现物体的旋转.跳动以及场景阴影的开启与优化 本程序将创建一个场景,并实现物体的动画效果 运行的结果如图: 运行结果 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three.js</title> <script src="../../../Import/three.js

  • JS学习笔记之闭包小案例分析

    本文实例讲述了JS学习笔记之闭包小案例.分享给大家供大家参考,具体如下: 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> *{ list-style

随机推荐