vue 中动态绑定class 和 style的方法代码详解


Posted in Javascript onJune 01, 2018

先列举一些例子

class="['content',{'radioModel':checkType}]"  
class="['siteAppListDirNode',{open:appitem.open==true}]" 
class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" 
class="{shortcutMenuShow:!showHideNav,shortcutMenuHide:showHideNav}" 
style="{height:checkType?'423px':'385px'}" 
src="userInfo.userFace?userInfo.userFace:defaultHead"

再来看详细解释

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

1. 数据绑定

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

<a v-bind:href="https://3water.com/">三水点靠木首页</a>

简写:

<a :href="https://3water.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>

总结:触类旁通,基本上都一样。

以上所述是小编给大家介绍的vue 中动态绑定class 和 style的方法代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
js querySelector() 使用方法
Dec 21 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
Ajax实现三级联动效果
Oct 05 Javascript
一个简单的node.js界面实现方法
Jun 01 #Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 #Javascript
Vue中的混入的使用(vue mixins)
Jun 01 #Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 #Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 #Javascript
Express之托管静态文件的方法
Jun 01 #Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 #Javascript
You might like
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python实现高效求解素数代码实例
2015/06/30 Python
python实现TF-IDF算法解析
2018/01/02 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python绘制地震散点图
2019/06/18 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
金士达面试非笔试
2012/03/14 面试题
工程管理造价应届生求职信
2013/11/13 职场文书
中学生家长评语大全
2014/04/16 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python