Vue基础篇（三）
2019-06-13 本文已影响14人
缺月楼
第四章 v-bind以及class与style的绑定
应用场景: DOM 元素经常会动态地绑定一些 class类名或 style 样式
了解v-bind指令
—
v-bind的复习
链接的href属性和图片的src属性都被动态设置了，当数据变化时，就会重新渲
染。
在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动
态绑定，它们也是HTML的属性，因此可以使用v-bind指令。我们只需要用v-bind
计算出表达式最终的字符串就可以，不过有时候表达式的逻辑较复杂，使用字符串
拼接方法较难阅读和维护，所以Vue.js增强了对class和style的绑定。
上一阶段讲过，这里复习一下，看一下代码,其实很好理解，就是动态绑定样式属性。
<div id="app">
<!-- v-bind绑定活的属性 -->
<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: 'https://imgsa.baidu.com/news/q%3D100/sign=1434d14ba151f3dec5b2bd64a4eff0ec/3ac79f3df8dcd1003383e1a07c8b4710b9122f17.jpg'
}
})
</script>
下面开始详细的介绍绑定的几种方式
------绑定 class 的几种方式
-
对象语法
给v-bind:class设置一个对象，可以动态地切换class，值对应true,false
当class的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的
用法，一般当条件多于两个时， 都可以使用data或computed
看下面的例子：
<style>
.divstyle {
background-color: red;
width: 100px;
height: 100px;
}
.borderstyle {
border: 5px solid green;
}
</style>
<div id="app">
绑定class对象语法：对象的键是类名 值是布尔值 <br>
<!-- 这个div元素有没有class为divstyle这个属性取决于 isActive是true还是false //绑定对象语法可以是一个或多个 -->-->
<div :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: false
}
})
</script>
有这么一个小需求 ：点击按钮变换颜色！ 看以下很容易理解
<style>
/* 样式先定义好 后面应用的时候不是tule就是false */
.divstyle {
background-color: red;
width: 100px;
height: 100px;
}
.borderstyle {
border: 5px solid green;
}
.btnBackground {
background-color: aquamarine;
}
.btn {
background-color: red;
}
</style>
<div id="app">
绑定class对象语法：对象的键是类名 值是布尔值 <br>
<!-- 这个div元素有没有class为divstyle这个属性取决于 isActive是true还是false -->
<!-- 绑定对象语法可以是一个或多个 -->
<div :class="{divstyle:isActive,borderstyle:isBorder}"></div>
<hr>
<hr>
<!-- v-bind 后面应用的时候不是tule就是false-->
<input type="button" value="点我换颜色" :class={btnBackground:isBack,btn:isB} v-on:click="changeColor">
</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: false,
isBack: true,
isB: false
},
//事件一律定义在 methods中
methods: {
changeColor: function() {
this.isBack = !this.isBack;
this.isB = !this.isB
}
},
})
</script>
-
数组语法
当需要应用多个class时， 可以使用数组语法 ， 给：class绑定一个数组，应用一个class列表：数组成员直接对应·className--类名
看演示
<style>
/* */
.divstyle {
background-color: red;
width: 100px;
height: 100px;
}
.borderstyle {
border: 5px solid green;
}
.btnBackground {
background-color: aquamarine;
}
.btn {
background-color: red;
}
.active {
background-color: palevioletred;
width: 100px;
height: 100px;
}
.error {
border: 5px solid blue;
}
</style>
<div id="app">
绑定class对象语法：对象的键是类名 值是布尔值 <br>
<!-- 这个div元素有没有class为divstyle这个属性取决于 isActive是true还是false -->
<!-- 绑定对象语法可以是一个或多个 -->
<div :class="{divstyle:isActive,borderstyle:isBorder}"></div>
<hr>
<hr>
<input type="button" value="点我换颜色" :class={btnBackground:isBack,btn:isB} v-on:click="changeColor">
<!-- 如果class类名过长时可以绑定 计算属性方法 -->
<div :class="classnames"></div>
<hr>
绑定class数组语法 数组中的成员直接对应类名 <br>
<div :class="[activeClass,errorClass]">我是数组绑定class</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: false,
isBack: true,
isB: false,
//绑定class数组语法 数组中的成员直接对应类名
activeClass: 'active',
errorClass: 'error'
},
methods: {
changeColor: function() {
this.isBack = !this.isBack;
this.isB = !this.isB
}
},
computed: {
classnames: function() {
return {
active: this.isBorder && isBack
}
}
},
})
</script>
可以用三目运算实现,对象和数组混用——————看演示
<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>
看DOM结构 理解这种用法
混合写法
- 在组件上使用 : 暂时不讲 以后详细讲解
--------绑定内联样式
使用 v-bind:style（即：style） 可以给元素绑定内联样式，方法与：class类似，也有对象语法和数组语法，看起来很像直接在元素上写 CSS:
注意 : css属性名称使用驼峰命名（came!Case）或短横分隔命名（kebabcase），切记Vue中只要是大写字母 都会装换成- 加小写
例如 ： fontSi ----- >>font-size ; deDfDiDDk------ >> de-df-di-d-dk
<div id="app">
<!-- 绑定内联样式：键代表style的数属性值，值就是代表属性对应的值-->
绑定内联样式：键代表style的数属性值，值就是代表属性对应的值
<!-- 切记 Vue中只要是大写字母 都会装换成 -加小写 fontSi ----- >>font-size ;deDfDiDDk------ >> de-df-di-d-dk -->
<div v-bind:style="{'color':color,'fontSize':fontSize}">这就是绑定style</div>
<div v-bind:style="[styleA]">数组绑定语法：</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 + 'px',
//定义数组语法
styleA: {
color: 'error',
fontsize: 120 + 'px'
},
}
})
</script>
- 应用多个样式对象时 ， 可以使用数组语法 ：在实际业务 中,style 的数组语法并不常
用 ， 因为往往可以写在一个对象里面 ： 而较为常用 的应当是计算属性，这里不讲 - 使用 :style 时， Vue .js 会自动给特殊的 css 属性名称增加前缀， 比如 transform 。
- 无需再加前缀属性！！！！
