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 相关文章推荐
在jQuery中 常用的选择器介绍
Apr 16 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
一个简单的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
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
javascript date格式化示例
2013/09/25 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
vue.js学习之UI组件开发教程
2017/07/03 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python reduce()函数的用法小结
2017/11/15 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
退休教师欢送会主持词
2014/03/31 职场文书
房屋出租委托书格式
2014/09/23 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
周年庆典答谢词
2015/01/20 职场文书
离婚协议书怎么写
2015/01/26 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL