vue绑定class与行间样式style详解
时间:2019-03-31
本文章向大家介绍vue绑定class与行间样式style详解,主要包括vue绑定class与行间样式style详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、绑定class属性的方式
1、通过数组的方式,为元素绑定多个class
<style> .red { color:red; /*color:#ff8800;*/ } .bg { background: #000; /*background: green;*/ } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { red_color : 'red', bg_color : 'bg' } }); } <div id="box"> <span :class="[red_color,bg_color]">this is a test string</span> </div>
上例为span 绑定2个class,通过设定red_color和bg_color的值,找到对应的class类名
2、通过控制class的true或者false,来使用对应的class类名, true: 使用该class, false: 不使用该class
<style> .red { color:red; } .bg { background: #000; } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { } }); } <div id="box"> <span :class="{red:true,bg:true}">this is a test string</span> </div>
3、这种方式,跟第二种差不多,只不过是把class的状态true/false用变量来代替
<style> .red { color:red; } .bg { background: #000; } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { r : true, b : false } }); } <div id="box"> <span :class="{red:r,bg:b}">this is a test string</span> </div>
4、为class属性绑定整个json对象
<style> .red { color:red; } .bg { background: #000; } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { json : { red : true, bg : false } } }); } <div id="box"> <span :class="json">this is a test string</span> </div>
二、绑定style行间样式的多种方式
1、使用json格式,直接在行间写
window.onload = function(){ var c = new Vue({ el : '#box', }); } <div id="box"> <span :style="{color:'red',background:'#000'}">this is a test string</span> </div>
2、把data中的对象,作为数组的某一项,绑定到style
window.onload = function(){ var c = new Vue({ el : '#box', data : { c : { color : 'green' } } }); } <div id="box"> <span :style="[c]">this is a test string</span> </div>
3、跟上面的方式差不多,只不过是为数组设置了多个对象
window.onload = function(){ var c = new Vue({ el : '#box', data : { c : { color : 'green' }, b : { background : '#ff8800' } } }); }
<div id="box"> <span :style="[c,b]">this is a test string</span> </div>
4、直接把data中的某个对象,绑定到style
window.onload = function(){ var c = new Vue({ el : '#box', data : { a : { color:'yellow', background : '#000' } } }); }
<div id="box"> <span :style="a">this is a test string</span> </div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- TweenLite的又一应用:图片的拼图加载效果
- mysql创建数据表时如何判断是否已经存在?
- 温故知新:接口的隐式实现与显式实现
- 也谈枚举ToString()性能的改进
- silverlight:利用telerik中的zip类对字符串进行压缩、解压
- 索引,视图,存储过程和触发器文档
- 重点解读:用小程序给公众号涨粉10w的7大行业案例
- 网络域名与注册商标冲突的解决途径
- 网站代码优化我们必须要做的那些事
- 真是热闹! Slade.com等多个域名被曝交易
- python编码问题之"encode"&"decode"
- python3编码问题终结者--还搞不懂你来找我
- Pycharm集成PyQt4并使用
- python遍历一个目录,输出所有文件名
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 编译器 bug 系列(1)
- 面试高频:反转链表
- 存储过程
- 为什么别人不想回答你提的问题?
- python面试题搜集:史上最全python面试题详解(一)
- 一日一技:在 Golang 中如何快速判断字符串是否在一个数组中
- 面试问题之操作系统
- 软技能提升:转转中后台规范落地实践
- python面试题搜集(三)
- 什么是计算机网络?为什么需要网络通信?如何进行网络编程?
- Python中好用又高效的Collections 模块
- 正确创建Python二维数组
- 深入理解Python内存管理与垃圾回收,再也不怕问了(一)
- 走进面向“对象”编程的理想国(一)——深入理解Python中的一切皆对象
- 深入理解Python内存管理与垃圾回收,再也不怕问了(二)