Vue.js,学习心得(五)
2017-10-30 本文已影响50人
战神飘雪
学习心得,
Class 与 Style,
直接上代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class 与 Style 绑定</title>
<style>
.active{
color:red;
}
.text-danger{
font-weight: bold;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app-1-1" v-bind:class="{ active: isActive, 'text-danger': hasError }">
{{msg}}
</div>
<hr>
<div id="app-1-2" v-bind:class="classObj">
{{msg}}
</div>
<hr>
<div id="app-1-3" v-bind:class="classObj">
{{msg}}
</div>
<hr>
<div id="app-2-1" v-bind:class="[activeClass,errorClass]">
{{msg}}
</div>
<br>
<div id="app-2-2" v-bind:class="[isActive ? activeClass : '', errorClass]">
{{msg}}
</div>
<br>
<div id="app-2-3" v-bind:class="[{ active: isActive }, errorClass]">
{{msg}}
</div>
<hr>
<div id="app-3-1">
<my-zujian class="baz boo"></my-zujian>
</div>
<br>
<div id="app-3-2">
<my-zujian v-bind:class="{active:isActive}"></my-zujian>
</div>
<hr>
<div id="app-4-1" v-bind:style="{color:activeColor,fontSize:activeSize+'px'}">{{msg}}</div>
<br>
<div id="app-4-2" v-bind:style="styleObject">{{msg}}</div>
<br>
<div id="app-4-3" v-bind:style="[styleOne,styleTwo]">{{msg}}</div>
<hr>
<div id="app-5" v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">
{{msg}}
</div>
<hr>
<script>
//v-bind:class="xxx:xxx",动态绑定class
var app1 = new Vue({
el:"#app-1-1",
data:{
msg:"添加上属性会变色",
isActive:true,
hasError:false
}
});
//v-bind:class="",不一定要绑定在模板里,可以把模板设置对象然后传对象
var app2 = new Vue({
el:"#app-1-2",
data:{
msg:"添加上属性会变色",
classObj:{
active:true,
'text-danger':true
}
}
});
//v-bind:class="",也可以返回一个对象
var app3 = new Vue({
el:"#app-1-3",
data: {
msg:"添加上属性会变色",
isActive: true,
error: null
},
computed: {
classObj: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
});
//数组语法
var app4 = new Vue({
el:"#app-2-1",
data:{
msg:'添加上属性会变色',
activeClass:'active',
errorClass:'text-danger'
}
});
//数组语法,如果你也想根据条件切换列表中的 class，可以用三元表达式：
var app5 = new Vue({
el:"#app-2-2",
data:{
msg:'添加上属性会变色,三元,isActive为true时',
isActive:true,
activeClass:'active',
errorClass:'text-danger'
}
});
//数组语法,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
var app6 = new Vue({
el:'#app-2-3',
data:{
msg:'添加上属性会变色,对象,isActive判断active的存在,为false时',
isActive:false,
errorClass:'text-danger'
}
})
//用在组件上,当在一个自定义组件上使用 class 属性时，这些类将被添加到根元素上面。这个元素上已经存在的类不会被覆盖。
Vue.component('my-zujian',{
template:'<p class="foo bar">HI~~</p>'
});
var app7 = new Vue({
el:'#app-3-1',
data:{
}
});
//对于带数据绑定 class 也同样适用：
var app8 = new Vue({
el:'#app-3-2',
data:{
isActive:true
}
});
//v-bind:style 的对象语法十分直观——看着非常像 CSS，
// 但其实是一个 JavaScript 对象。
// CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
var app9 = new Vue({
el:'#app-4-1',
data:{
msg:'我爱你悦悦',
activeColor:'red',
activeSize:'26'
}
});
//v-bind:style="{xxx}"也可以写成对象
// 直接绑定到一个样式对象通常更好，这会让模板更清晰：
var app10 = new Vue({
el:'#app-4-2',
data:{
msg:'我爱你悦悦',
styleObject:{
color:'red',
fontSize:'26px'
}
}
});
//v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
var app11 = new Vue({
el:'#app-4-3',
data:{
msg:'我爱你悦悦',
styleOne:{
color:'red',
fontSize:'26px'
},
styleTwo:{
fontWeight:'bold'
}
}
});
//自动添加前缀
//当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，
// 如 transform，Vue.js 会自动侦测并添加相应的前缀。
//多重值
//从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，
// 常用于提供多个带前缀的值，例如：
var app12 = new Vue({
el:'#app-5',
data:{
msg:'悦悦我爱你'
}
})
</script>
</body>
</html>
