本文主要介绍在Vue3中几种数据绑定的方式。
在模板中进行数据绑定
模板语法
模板语法是Vue3中最常用的数据绑定方式,它使用Mustache语法(双花括号)将数据绑定到HTML模板中。例如:
<template>
<h1>{{message}}</h1>
</template>
<script setup>
import { ref } from "vue"
let message = "Hello, Vue3!"
</script>
<style>
</style>
在上面的例子中,我们使用了双花括号将message变量绑定到了HTML模板中的一个h1标签的文本内容。当Vue实例初始化时,会将message对象中的属性和方法挂载到Vue实例上,从而实现了数据绑定。运行效果如图1-1所示。
模板语法是Vue3中最常用的数据绑定方式,使用Mustache语法将数据绑定到HTML模板中。
属性绑定
Vue3中的属性绑定指的是将Vue实例中的一个属性值绑定到DOM元素的一个属性上,使得DOM元素的属性值随着Vue实例中指定的属性值变化而更新。Vue3提供了两种属性绑定的方式:v-bind指令和简写语法“:”,它们可以用于绑定DOM元素的任何属性,包括class和style。
下面我们通过一个例子来说明属性绑定的用法:
<template>
<div>
<h1>{{ data.title }}</h1>
<p :class="{ active: data.isActive }">This is a paragraph</p>
<button v-bind:disabled="data.isDisabled" @click="onClick">Click me</button>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const data = reactive({
title: 'Vue3 Attribute Binding',
isActive: true,
isDisabled: false
})
const onClick = () => {
data.isDisabled = true
data.isActive = !data.isActive
}
</script>
<style>
</style>
在上面的例子中,我们使用了v-bind指令的简写语法“:”对class和disabled属性进行了绑定。在p元素中,我们使用了一个对象字面量作为:class绑定的值,这个对象字面量的key是class名,value是要绑定的属性值;在button元素中,我们直接使用了一个Boolean值来绑定disabled属性。
当isActive的值为true时,p元素的class属性会包含“active”;当isDisabled的值为true时,button元素会变成不可用状态。当我们点击button时,onClick回调函数会被触发,将isDisabled的值设为true,并将isActive的值取反,从而更新p元素的class属性。运行效果如图1-2所示。
通过上面的例子,我们可以看到Vue3中通过v-bind指令或“:”语法,我们可以很方便地将Vue实例中的属性值与DOM元素的任何属性进行绑定,使得它们随着Vue实例中的属性值变化而自动更新。
双向绑定
双向绑定是指数据模型与视图之间的双向绑定,即当数据模型改变时,视图会随之更新,而当视图改变时,数据模型也会随之更新,实现了数据和视图的同步更新。在Vue3中通过v-model指令可以实现双向绑定。
例如,将input框的值绑定到一个数据模型中,当用户在input框中输入时,数据模型的值会随之更新。而当数据模型的值改变时,input框中的值也会随之更新。
<template>
<div>
<input v-model="message">
<p>{{ message }}</p>
</div>
</template>
<script setup>
import { ref } from "vue"
let message = ref("")
</script>
<style>
</style>
在代码中,我们将input框的值绑定到了message这个数据模型中,并且在页面上展示了message的值。当用户在input框中输入时,message的值会随之更新,而当message的值改变时,页面上展示的值也会随之更新,实现了数据和视图的同步更新。运行效果如图1-3所示,在输入框中输入任何字符,下方的p标签的内容也会随之改变。