vue.js---v-bind以及class与style的绑定
2019-08-06 本文已影响5人
学的会的前端
了解bind指令
-
v-bind作用：绑定活的属性。 - 示例：链接的 href 属性和图片的 src 属性都被动态设置了，当数据变化时，就会重新渲
染。
<div id = "app">
<a v-bind:href = "url">我是百度</a>
<img :src = "imgUrl" alt = "">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
url: 'http://baidu.com',
imgUrl: 'http://s.bdstatic.com/xbox/wuxian/img/logo426.png'
}
})
</script>
绑定 class 的几种方式
对象语法
给 v-bind:class 设置一个对象，可以动态地切换 class，* 值对应true ,false,当值为true时，对应的class就被应用，当为false的时候，class就没有被应用。
<head>
<meta charset="UTF-8">
<title>绑定class</title>
<style>
.divStyle {
background: red;
width: 100px;
height: 100px;
}
.borderStyle {
border: 10px solid blue;
}
</style>
</head>
<body>
绑定class！！<br/>
<div id = "app">
<hr>
绑定class对象语法：对象的键是类名，值是布尔值<br/>
<div v-bind:class = "{divStyle: isActive,borderStyle:isBorder}"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
isBorder: true
}
})
</script>
//因为isActive和isBorder都是true,所以divStyle和borderStyle两个class都被应用。
代码结果截图：
image.png
当 class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时， 都可以使用 data 或 computed。
数组语法
- 绑定class数组语法：数组中的成员直接对应类名。
<div :class = "[activeClass,errorClass]"></div>
var app = new Vue({
el: '#app',
data: {
activeClass:'active',
errorClass: 'error'
},
<style>
.active {
background: yellow;
height: 100px;
width: 300px;
}
.error {
border: 20px solid orange;
}
</style>
代码结果图：
image.png
可以对象和数组混用
<div id = "app">
数组和对象混用,第一个成员是对象，第二个成员数数组，
<div :class = "[{'active':isActive},errorClass]"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
errorClass: 'error'
}
})
</script>
绑定内联样式
使用 vbind:style （即：style ） 可以给元素绑定内联样式，方法与 ：class 类似，
也有对象语法和数组语法，看起来很像直接在元素上写 CSS:
注意 : css 属性名称使用驼峰命名（ came!Case ）或短横分隔命名（ kebab-case）
应用多个样式对象时 ， 可以使用数组语法 ,在实际业务 中,style 的数组语法并不常用 ， 因为往往可以写在一个对象里面 , 而较为常用 的应当是计算属性使用 :style 时， Vue .js 会自动给特殊的 css 属性名称增加前缀， 比如 transform 。无需再加前缀属性！！！！
对象语法：
div id = "app">
绑定内联样式：键代表style的属性值，值就代表属性对应的值。
切记：在vue中，任何大写字母都会自动转换成-加小写字母
<div v-bind:style = "{'color':color,'fontSize':fontSize+'px'}">
大家晚上好
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
color: 'red',
fontSize: 16
}
})
</script>
数组语法
<div v-bind:style = "[styleA,styleB]"></div>
styleA: {
color: yellow
},
styleB: {
....
}
//几乎不使用
