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 相关文章推荐
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
详解Vue底部导航栏组件
May 02 Javascript
微信小程序实现手指拖动选项排序
Apr 22 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
python中查看变量内存地址的方法
2015/05/05 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
python事件驱动event实现详解
2018/11/21 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
C++是不是类型安全的
2014/02/18 面试题
财务经理的岗位职责
2013/12/17 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
个人融资协议书
2014/10/02 职场文书
介绍信格式
2015/01/30 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
行政上诉状范文
2015/05/23 职场文书
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript