夜光序言:
初次见面会时,他端着酒杯,伴着殷勤话,笑嘻嘻地向我敬酒时的模样,还历历在目。等到他找到更好的圈子时,那副殷勤的面孔,立刻变得冷漠,这转变之快,我真以为在看川剧变脸。
至此,我就越发觉得此人不可深交,见人下菜碟的场面见多了,也寒了这颗心,对于两面人还是敬而远之吧。
正文:
Vue.js 样式绑定
Vue.js class
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。
表达式的结果类型除了字符串之外,还可以是对象或数组。
例子1:
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dynamic">
<div v-bind:style="{color: 'red', fontSize: fontSize + 'px'}">可以动态调节</div>
<div v-bind:style="objectStyle"> 不可以动态调节</div>
{{fontSize}}
<button @click="++fontSize">+</button>
<button @click="--fontSize">-</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#dynamic',
data: {
fontSize: 20,
objectStyle: {
color: 'green',
fontSize: this.fontSize + 'px'
}
}
})
</script>
</body>
</html>
例子2:
PS:动态调节需要注意在 data 里面调用 data 的数据是 undefined 的,正确的使用方法是使用 computed。
(使用 methods 返回无效,或许是因为不支持这样的设置)
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-bind:style="{color: 'red', fontSize: size + 'px'}">可以动态调节</div>
<div v-bind:style="computedStyle">可以动态调节</div>
<div v-bind:style="objectStyle"> 不可以动态调节</div>
<div v-bind:style="methodStyle"> 不可以动态调节</div>
{{size}}
<button @click="++size">+</button>
<button @click="--size">-</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
size: 20,
objectStyle: {
color: 'green',
fontSize: this.size + 'px' //夜光:this.size为undefined
}
},
methods:{
methodStyle: function(){
return {color: 'green', fontSize: this.size + 'px'} //夜光:失效,颜色也不会改变
}
},
computed: {
computedStyle: function () {
return {color: 'red', fontSize: this.size + 'px'}
}
}
})
</script>
</body>
</html>
例子3:
嗯唔~~加一个 watch 方法,objectStyle 的方式也能实现动态变化。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-bind:style="{color: 'red', fontSize: size + 'px'}">可以动态调节</div>
<div v-bind:style="computedStyle">可以动态调节</div>
<div v-bind:style="objectStyle"> 可以动态调节</div>
<div v-bind:style="methodStyle()"> 可以动态调节</div>
{{size}}
<button @click="++size">+</button>
<button @click="--size">-</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
size: 20,
objectStyle: {
color: 'green',
fontSize: 20 + 'px' //this.size为undefined
}
},
methods:{
methodStyle: function(){
return {color: 'green', fontSize: this.size + 'px'} //失效,颜色也不会改变
}
},
computed: {
computedStyle: function(){
return {color: 'red' , fontSize: this.size + 'px'}
}
},
watch: { //这里我们添加一个watch方法
size: function(){
this.objectStyle.fontSize = this.size + 'px'
}
}
})
</script>
</body>
</html>