vue的数据绑定

最新推荐文章于 2026-03-21 16:05:08 发布

原创最新推荐文章于 2026-03-21 16:05:08 发布 · 458 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #开发语言

本文介绍了Vue框架中的数据绑定，包括单向绑定(v-bind)和双向绑定(v-model)。单向绑定确保数据从data流向页面，而双向绑定允许数据在页面和data间双向流动，常见于表单元素。此外，文章还提及了v-model的简写形式和v-html指令用于输出HTML代码。

Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

使用 v-html 指令用于输出 html 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue (runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="example1" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>

<script>
const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">这里会显示红色！</span>'
    }
  }
}

Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
</body>
</html>

运行结果如下

单向绑定(v-bind)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
</head>
<body>
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>

<script>
const app = {
  data() {
    return {
      use: false
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>
</html>

输出结果：

调用前面设置的id

const app = {
data() {
return {
use: false
}
}
}

判定 <div v-bind:class="{'class1': use}">调用前面设置的颜色设定

点击修改颜色后面设置的空格则实现指令行变色