Vue基础知识(二) - v-bind绑定class属性
2021-11-04 本文已影响0人
SingingHan
- 在我们学习前端的初期，我们会发现在开发中,总是需要频繁地对标签的属性进行设置与修改,例如：在DOM元素上进行 setAttribute() , getAttribute() 方法的调用
- 随之我们会发现一个问题,当DOM元素的属性值需要频繁地发生修改时,需要我们频繁地对属性本身去进行修改,我们的大部分时间和精力基本都用在修改属性这件事上,这对我们开发来说是非常麻烦的一件事。
此时Vue的一个指令： "v-bind" 指令 就是来简化这件“麻烦事”的 ，它能绑定一个或多个属性, 并且动态地对绑定属性
(1.1) v-bind指令的基本使用:
- 在标签中写入 : v-bind:属性= " 变量 "
// 例如:
<img v-bind:src="变量" />
<a v-bind:href="变量" />
注意：双括号" "内的变量指的是Vue实例中 data属性 里面的变量
- 比如我们想在 "img" 元素上绑定一个 src 属性 或 给一个 "a" 元素绑定href属性
代码如下:
<body>
<div id="app"></div>
<template id="my-app">
<!-- vue2 template模板中只能有一个根元素 -->
<!-- vue3 是允许template中有多个根元素 -->
<!-- 1.v-bind的基本使用 -->
<img v-bind:src="imgUrl" alt="">
<a v-bind:href="vueUrl">Vue.js 入门</a>
</template>
// 引入vue
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
imgUrl: './vue.jpg'，
vueUrl: 'https://cn.vuejs.org/'
}
}
}
Vue.createApp(App).mount('#app');
</script>
页面结果:
result.png
竟然这个指令这么香, 那它有语法糖(简便写法)吗? - 还别说,还真有
(1.2) v-bind的简便写法:
把 v-bind:属性 = "变量" 改为 :属性="变量", 也就是只剩下冒号 ":属性"
例子代码如下:
<template id ="my-app">
<img :src="imgUrl" alt="">
<a :href="vueUrl">Vue.js 入门</a>
</template>
(2) v-bind绑定 class 属性:
绑定 class属性 分为 两种方式: (1)对象语法 (2)数组语法
- (1).对象语法的使用:
(1.1).对象语法的含义是: class属性后面跟的是一个对象。这个对象的结构是 "{ '类名1': 布尔值1, '类名2': 布尔值2, ...}"
用法一:普通的绑定方式, 绑定data中的变量
<div :class="className">Hello World</div>
// data
data() {
return {
className: 'hello',
}
}
}
result1.png
用法二:直接通过{}绑定一个类,对象语法: {'active': isActive}
<div :class="{'active': isActive}">Hello World</div>
// data
data() {
return {
isActive: true,
}
}
注意: isActive是一个"布尔值"的变量
result2.png
用法三：可以通过多个键值对，绑定多个类
<div :class="{active: isActive, title: true}">Hello World</div>
// data
data() {
return {
isActive: true,
}
}
result3.png
用法四：与普通的类同时存在(声明)，并不会发生冲突,而是会结合在一起
<div class="paragraph" :class="{active: isActive, title: true}">Hello World</div>
// data
data() {
return {
isActive: true,
}
}
注：如果 isActive 和 title 都为true，那么dom元素上 会绑定 paragraph / active / title 三个类
result4.png
用法五: 绑定data函数中的对象
<div :class="classObj">Hello World</div>
// data
data() {
return {
classObj: {
active: true,
title: true
}
}
}
result5.png
用法六: 将返回的对象放到一个methods方法或者computed中
<div :class="getClassObj()">Hello World</div>
// methods
methods: {
getClassObj() {
return {
active: true,
title: true
};
}
},
// computed
computed: {
classObj() {
return {
active: true,
title: true
};
}
}
result6.png
- (2)数组语法的使用
用法一: 使用data中的变量
<h2 :class="['active', title]">Hello World</h2>
// data
data() {
return {
title: 'cba',
}
}
result-1.png
用法二:使用三元表达式
<h2 :class="['paragraph', isActive ? 'active': '']">Hello World</h2>
// data
data() {
return {
isActive: true
}
}
result-2.png
用法三:数组中穿插对象
<h2 :class="['paragraph', 'title', { 'active': isActive }]">Hello World</h2>
// data
data() {
return {
isActive: true
}
}
image.png
