vue属性和样式的绑定
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="vue/vue.js"></script>
<style>
.big{
width: 200px;
height: 100px;
background-color: chartreuse;
}
.yans{
color: crimson;
}
.a{
width: 300px;
height: 100px;
background-color: brown;
}
.b{
color: floralwhite;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="app">
<div v-bind:style = "{color:colorStyle,width:widthStyle,height:heightStyle,backgroundColor:backgroundColorStyle}">样式style对象绑定普通形式</div>
<div v-bind:style = "objStyles">样式style对象绑定简写形式</div>
<div v-bind:class = "{big:isBig}">样式class对象绑定普通形式</div>
<button v-on:click = "dianji">点击切换</button>
<div v-bind:class = "objClasses">样式class对象简写绑定</div>
<div v-bind:class = "[aClass]">样式class数组普通绑定形式</div>
<div v-bind:class = "arrClasses">样式class数组简写绑定形式</div>
<a v-bind:href="url">点击</a>
</div>
<!--
样式绑定style对象形式:
<标签 v-bind:style = "{样式名:样式值(在data中定义赋值)...}"> </标签>
例:<div v-bind:style = "{color:colorStyle,width:widthStyle,height:heightStyle}">你好啊</div>
赋值形式: data:{
colorStyle:'red',
widthStyle:'100px',
heightStyle:'100px',
backgroundColorStyle:'yellow',
}
简写style对象形式:提供一个大变量对象objStyle,里面存样式对象
例:<div v-bind:style = "objStyles">样式style对象绑定简写形式</div>
赋值形式: objStyles:{
color:'red',
width:'200px',
height:'200px',
backgroundColor:'skyblue',
}
样式绑定class对象形式:
<标签 v-bind:class = "{类名:is类名(首字母大写在data中声明赋值)....}"> </标签>
在data中,is(类名)的值为true和fales,true为加入类,false为移除类
例:<div v-bind:class = "{big:isBig}">样式class对象绑定简写形式</div>
赋值形式: isBig:true
dianji:function(){
this.isBig = !this.isBig
}
简写class对象绑定形式,提供一个大变量对象objClasses,保存类名
例:<div v-bind:class = "objClasses">样式class对象简写绑定</div>
赋值形式: objClasses:{
big:true,
yans:true
}
更改:this.objClasses.big = false 示例
样式绑定class数组形式:
<div v-bind:class = "[类名Class,.....]">样式class对象绑定简写形式</div>
例:<div v-bind:class = "[aClass]">样式class数组普通绑定形式</div>
赋值形式:aClass:'a',
移除样式:令类名Class :' ',就行
简写class数组绑定形式,提供一个大变量数组arrClasses,存放类名
例:<div v-bind:class = "arrClasses">样式class数组简写绑定形式</div>
赋值形式:arrClasses:['a','b']
元素属性的绑定形式:
<a v-bind:href="url">点击</a>
-->
<script>
var app = new Vue({
el:'#app',
data:{
url:'',
colorStyle:'red',
widthStyle:'100px',
heightStyle:'100px',
backgroundColorStyle:'yellow',
objStyles:{
color:'red',
width:'200px',
height:'200px',
backgroundColor:'skyblue',
},
isBig:true,
objClasses:{
big:true,
yans:true
},
aClass:'a',
arrClasses:['a','b']
},
methods:{
dianji:function(){
this.isBig = !this.isBig
}
}
})
</script>
</body>
</html>