详解Vue.js动态绑定class

Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新。基于这种特性,通过vue.js动态绑定class就变得非常简单。

1. 数据绑定

vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下:

<a v-bind:href="http://www.cnblogs.com/">博客园首页</a>
简写:
<a :href="http://www.cnblogs.com/">博客园首页</a>

2. 动态绑定class

vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量,可以通过 class="{{ className }}" 方式设置class,但是vue不推荐这种方式与 v-bind:class 的方式混用,二者只能选其一。v-bind:class 虽然与class属性里绑定变量的方式不能共存,却可以与原生的class特性共存, 一个DOM标签中允许同时出现原生class和v-bind:class。

2.1 v-bind:class 支持string类型,不建议这样使用,因为string值是固定不变的,无法实现动态改变class的需求

HTML代码:
<div :class=" 'classA classB' ">Demo1</div>
渲染后的HTML:
<div class="classA classB">Demo1</div>

2.2 v-bind:class 支持数据变量,当变量值改变时,将同时更新class。v-bind:class指令的值限定为绑定表达式,如javascript表达式

HTML代码:
<div :class="classA">Demo2</div>
Javascript代码:
data: {
 classA: 'class-a' //当classA改变时将更新class
}
渲染后的HTML:
<div class="class-a">Demo2</div>

写在指令中的值会被视作表达式,如javascript表达式,因此v-bind:class接受三目运算:

HTML代码:
<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>
渲染后的HTML:
<div class="class-a">Demo3</div>

2.3 v-bind:class 支持对象,对象改变时会动态更新class

HTML代码:
<div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>
Javascript代码:
data: {
 isA: false, //当isA改变时,将更新class
 isB: true //当isB改变时,将更新class
}
渲染后的HTML:
<div class="class-b">Demo4</div>
HTML代码:
<div :class="objectClass">Demo5</div>
Javascript代码:
data: {
 objectClass: {
 class-a: true,
 class-b: false
 }
}
渲染后的HTML:
<div class="class-a">Demo5</div>

2.4: v-bind:class支持数组, 数组里的变量改变时,会动态更新class列表

HTML代码:
<div :class="[classA, classB]">Demo6</div>
Javascript代码:
data: {
 classA: 'class-a',
 classB: 'class-b'
}
渲染后的HTML:
<div class="class-a class-b">Demo6</div>

数组中可以包含object类型,数组中的object对象改变,也会更新class列表

HTML代码:
<div :class="[classA, classB]">Demo7</div>
Javascript代码:
data: {
 classA: 'class-a',
 objectClass: {
 classB: 'class-b', // classB 的值为class-b, 则将classB的值添加到class列表
 classC: false, // classC值为false,将不添加classC
 classD: true // classD 值为true,classC将被直接添加到class列表
}
}
渲染后的HTML:
<div class="class-a class-b classD">Demo7</div>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

时间: 2016-12-19

vue.js删除动态绑定的radio的指定项

上图效果,动态添加绑定radio选项,然后也可以动态删除,右边编辑器删除,左边的视图也对应的删除. 视图代码 view: "<ul><li v-for='option in options'>" + "<input type='radio' :name='groupName'>{{option.text}}" + "</li></ul>", 数据绑定model.options: opti

AngularJS 单选框及多选框的双向动态绑定

AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示: <input type="text" ng-model="topic.title" /> 只需要用ng-model 与 $scope 中的属性对应,即实现了type="text" 的双向动态绑定.当 <input type="radio" /> 及 <inpu

AngularJS动态绑定HTML的方法分析

本文实例讲述了AngularJS动态绑定HTML的方法.分享给大家供大家参考,具体如下: 在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写),这样的需求,更是遍地皆是. 对于对angular的读者肯定首先会想到ngBindHtml,对,angular为我们提供了这个指令来动态绑定HTML,它会将计算出来的表达式结果用innerHTML绑定到DOM.

js循环动态绑定带参数函数遇到的问题及解决方案[转]

众所周知,不带参数的绑定非常简单,只要使用(语法:"document.getElementById("对象ID名").attachEvent("事件名,如onchange",函数名);")(示例:"document.getElementById("select_0").attachEvent("onchange",modifyFunction);")即可.(注:以下只写示例) 带参数的绑

vue.js选中动态绑定的radio的指定项

上一文,介绍了vue.js动态添加.删除绑定的radio选项,本文介绍如何选中radio的某一项 绑定的数据和上文的model是一致的,选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中. 选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用checked='true',判断是否需要渲染ch

AngularJS单选框及多选框实现双向动态绑定

在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令. 一.ng-model ng-model指令用来将input.select.textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它将当前作用域中运算表达式的值同给定的元素进行绑定.如果属性不存在,它会隐式创建并将其添加到当前作用域中. 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! <input type="te

Javascript动态绑定事件的简单实现代码

下面是页面的dom结构 复制代码 代码如下: <ul id="test"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> 下面是javascript代码 复制代码 代码如下: //根据ID获取对象 function id(v) { return document.getElementById(

javascript下动态this与动态绑定实例代码

那么函数就是被掰成两部分储存于对象,一是其函数名(键),一是函数体(值),那么函数中的this一般都指向函数所在的对象.但这是一般而已,在全局调用函数时,我们并没有看到调用者,或者这时就是window.不过,函数声明后,其实并没有绑定到任何对象,因此我们可以用call apply这些方法设置调用者. 一个简单的例子: [script] <script> window.name = "window"; var run = function() { alert("My

Chrome扩展页面动态绑定JS事件提示错误

问题描述: 当开发Chrome扩展时,页面的popup.html中需要js的时候,直接将JS写在动态绑定JS事件会提示: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".. 解决办法: 在popup.html中引用外部的js文件动态绑定JS

JavaScript动态绑定详解

问题描述: 假设我们的网页中动态生成了一个按钮,在这个按钮生成之前我们按照一般的事件绑定方法为此按钮绑定了触发事件,但是问题是绑定的事件并没有生效(JavaScript中为元素绑定的事件失效) 分析 1.首先我们来看一下这个按钮是怎么回事: 问题中按钮有一个很关键的特性:动态生成,也就是说是在网页加载完成之后执行某些操作才产生的,它一开始是不存在的: 2.然后我们来分析一下事件的绑定 对于动态生成的元素,它不同于一般的网页既有元素,它的事件绑定不能通过普通的事件绑定实现. 3.关于JavaScr

COM组件中调用JavaScript函数详解及实例

COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional

在Node.js中使用Javascript Generators详解

Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio

JavaScript cookie详解及简单实例应用

JavaScript cookie详解 一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客户端脚本化. cookie数据可以自动地在Web浏览器好Web服务器之间传递. 在浏览器中可以通过navigator.cookieEnabled属性检查浏览器的cookie功能是否被激活.     二.cookie的基本属性     每个cookie都有四个可

JavaScript 继承详解(四)

Classical Inheritance in JavaScript. Crockford是JavaScript开发社区最知名的权威,是JSON.JSLint.JSMin和ADSafe之父,是<JavaScript: The Good Parts>的作者. 现在是Yahoo的资深JavaScript架构师,参与YUI的设计开发. 这里有一篇文章详细介绍了Crockford的生平和著作. 当然Crockford也是我等小辈崇拜的对象. 调用方式 首先让我们看下使用Crockford式继承的调用

JavaScript 继承详解(五)

在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance.  John Resig作为jQuery的创始人而声名在外.是<Pro JavaScript Techniques>的作者,而且Resig将会在今年秋天推出一本书<JavaScript Secrets>,非常期待. 调用方式 调用方式非常优雅: 注意:代码中的Class.extend._super都是自定义的对象,我们会在后面的代码分析中详

JavaScript 继承详解(六)

在本章中,我们将分析Prototypejs中关于JavaScript继承的实现. Prototypejs是最早的JavaScript类库,可以说是JavaScript类库的鼻祖. 我在几年前接触的第一个JavaScript类库就是这位,因此Prototypejs有着广泛的群众基础. 不过当年Prototypejs中的关于继承的实现相当的简单,源代码就寥寥几行,我们来看下. 早期Prototypejs中继承的实现 源码: var Class = { // Class.create仅仅返回另外一个函

IOS ObjectC与javascript交互详解及实现代码

IOS OC与js交互详解 JS注入 : 把JS代码有OC注入到网页 JS注入又叫做OC和JS的交互 OC和JS的交互需要一个桥梁(中介),这个桥梁就是UIWebView的代理方法 网页加载初始内容 #import "ViewController.h" @interface ViewController ()<UIWebViewDelegate> @property (weak, nonatomic) IBOutlet UIWebView *webView; @end -

javascript 闭包详解及简单实例应用

JS 闭包详解及实例: 最近学习JS的基础知识,学习了闭包的知识点,有很多疑惑,这一段时间还是一直有在看闭包的相关知识理解就更深入了一点,下面说说我的理解. function fn(){ var a = 0; return function (){ return ++a; } } 如上所示,上面第一个return返回的就是一个闭包,那么本质上说闭包就是一个函数.那么返回这个函数有什么用呢? 那是因为这个函数可以调用到它外部的a这个变量.其实也就是说,return返回的是这个函数 + a这个变量

javascript 闭包详解

看了一下网上闭包的概念及文章,对于这个问题,自己做一个梳理吧. 问:闭包是什么? 答:闭包是指在 JavaScript 中,内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后. 这个是我自身第一次碰到闭包的问题 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>闭包循环问题</title> <