Vue3中数据的绑定

专业研究祖传Bug编写术

已于 2024-03-09 17:12:23 修改

阅读量635

点赞数

分类专栏： Vue 3基础入门教程文章标签： vue.js javascript 前端

于 2023-10-15 14:50:02 首次发布

本文链接：https://blog.csdn.net/aahwj/article/details/133842258

版权

Vue 3基础入门教程专栏收录该内容

27 篇文章 3 订阅

订阅专栏

在模板中进行数据绑定

模板语法

模板语法是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所示。
在这里插入图片描述

图1-1 ref创建响应式数据示例运行效果

模板语法是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所示。
在这里插入图片描述

图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标签的内容也会随之改变。
在这里插入图片描述