[js高手之路] vue系列教程 - 绑定class与行间样式style(6)
2017-08-16 10:53
1366 查看
一、绑定class属性的方式
1、通过数组的方式,为元素绑定多个class
上例为span 绑定2个class,通过设定red_color和bg_color的值,找到对应的class类名
2、通过控制class的true或者false,来使用对应的class类名, true: 使用该class, false: 不使用该class
3、这种方式,跟第二种差不多,只不过是把class的状态true/false用变量来代替
4、为class属性绑定整个json对象
二、绑定style行间样式的多种方式
1、使用json格式,直接在行间写
2、把data中的对象,作为数组的某一项,绑定到style
3、跟上面的方式差不多,只不过是为数组设置了多个对象
4、直接把data中的某个对象,绑定到style
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格式,直接在行间写
1 window.onload = function(){ 2 var c = new Vue({ 3 el : '#box', 4 }); 5 } 6 7 <div id="box"> 8 <span :style="{color:'red',background:'#000'}">this is a test string</span> 9 </div>
2、把data中的对象,作为数组的某一项,绑定到style
1 window.onload = function(){ 2 var c = new Vue({ 3 el : '#box', 4 data : { 5 c : { 6 color : 'green' 7 } 8 } 9 }); 10 } 11 12 <div id="box"> 13 <span :style="[c]">this is a test string</span> 14 </div>
3、跟上面的方式差不多,只不过是为数组设置了多个对象
1 window.onload = function(){ 2 var c = new Vue({ 3 el : '#box', 4 data : { 5 c : { 6 color : 'green' 7 }, 8 b : { 9 background : '#ff8800' 10 } 11 } 12 }); 13 }
1 <div id="box"> 2 <span :style="[c,b]">this is a test string</span> 3 </div>
4、直接把data中的某个对象,绑定到style
1 window.onload = function(){ 2 var c = new Vue({ 3 el : '#box', 4 data : { 5 a : { 6 color:'yellow', 7 background : '#000' 8 } 9 } 10 }); 11 }
1 <div id="box"> 2 <span :style="a">this is a test string</span> 3 </div>
相关文章推荐
- vue.js入门教程之绑定class和style样式
- vue.js绑定class和style样式(6)
- vuejs教程4-Class 与 Style 绑定
- vue绑定class与行间样式style详解
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
- vue.js学习笔记之绑定style样式和class列表
- [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)
- Class 与 Style 绑定内联样式(vue.js)
- Vue.js 之 Class与Style绑定
- [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)
- Vue.js学习系列(三十一)-- Vue.js样式绑定(二)
- Vue.js笔记-计算属性 class与style绑定
- Vue.js笔记第二波,Class 与 Style 绑定,条件渲染,列表渲染
- Vue.js学习系列(三十二)-- Vue.js样式绑定(三)
- Vue.js学习 Item6 -- Class 与 样式绑定
- [js高手之路] vue系列教程
- vue组件内部绑定class还有style样式
- 学习使用vue.js(五)绑定Style 与Class
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
- vue.js(6)-Class 与 Style 绑定