Vue.js 中的 class 绑定语法
时间: 2023-06-03 11:07:55 浏览: 48
可以使用 v-bind:class 或简写方式 :class 进行绑定。例如:
```
<div v-bind:class="{ active: isActive }"></div>
```
其中,isActive 是一个 data 中的变量,如果它的值为 true,该元素的 class 就会加上 active。
相关问题
vue.js class 绑定多个函数
可以使用对象语法来绑定多个函数,如下所示:
```html
<template>
<button @click="{
handleClick1,
handleClick2,
handleClick3
}">Click me</button>
</template>
<script>
export default {
methods: {
handleClick1() {
console.log('handleClick1 called')
},
handleClick2() {
console.log('handleClick2 called')
},
handleClick3() {
console.log('handleClick3 called')
}
}
}
</script>
```
在这个例子中,当按钮被点击时,三个函数 `handleClick1`、`handleClick2` 和 `handleClick3` 都会被调用。可以看到,在对象语法中,每个属性都是一个函数名,对应着要执行的函数。这种方式可以让你在绑定事件时,同时绑定多个函数,让代码更加简洁。
vue.js的模板语法
Vue.js的模板语法使用了一种称为“Mustache”的语法来插入数据和表达式,同时也支持一些指令来处理 DOM 元素和组件。下面是一些常用的模板语法:
1. 数据绑定
使用双大括号 {{ }} 插入数据,如:
```
<span>{{ message }}</span>
```
2. 指令
使用 v- 前缀来添加指令,如:
- v-if: 根据表达式的值条件性地渲染元素。
- v-for: 遍历数组或对象,渲染元素列表。
- v-bind: 动态地绑定一个或多个特性,缩写为 :。
- v-on: 绑定事件监听器,缩写为 @。
如:
```
<button v-if="showBtn" v-bind:class="btnClass" v-on:click="handleClick">Click me</button>
<div v-for="item in items" :key="item.id">{{ item.name }}</div>
```
3. 表达式
可以在双大括号 {{ }} 中使用 JavaScript 表达式,如:
```
<span>{{ message + ' world' }}</span>
```