Vue学习笔记3
程序员文章站
2022-03-29 09:21:56
...
Class 与 Style 绑定
绑定 HTML Class
1.对象语法
<div id="app">
<div class="static" v-bind:class="{ active: isActive, 'text': hasError }">
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
绑定的数据对象可以不用内联定义在模板里,可以如下定义:
<div id="app">
<div class="static" v-bind:class="classObject">
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
classObject:{
active: true,
'text-danger': true
}
}
})
</script>
2.数组语法
我们可以把一个数组传给 v-bind:class
,以应用一个 class 列表:
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
3.用在组件上
<div id="app">
<my-component class="baz boo"></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
var vm = new Vue({
el: '#app',
})
</script>
绑定内联样式
1.对象语法v-bind:style
的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hi</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
activeColor: 'red',
fontSize: 30
}
})
</script>
直接绑定到一个样式对象通常更好,这会让模板更清晰:
<div id="app">
<div v-bind:style="styleObject">hello</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
})
</script>
2.数组语法v-bind:style
的数组语法可以将多个样式对象应用到同一个元素上:
<div v-bind:style="[baseStyles, overridingStyles]"></div>
3.自动添加前缀
当 v-bind:style
使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform
,Vue.js 会自动侦测并添加相应的前缀。
转载于:https://www.jianshu.com/p/50b57810b544
上一篇: 彻底理解js中this的指向,不必硬背。
下一篇: 彻底理解js中this的指向,不必硬背。