Vue双向数据绑定案列

Vue双向数据绑定是Vue框架的核心特性之一，它可以让页面上的数据和Vue实例中的数据保持同步。下面是一个简单的Vue双向数据绑定的示例：

HTML代码：

<div id="app">
  <input v-model="message" type="text">
  <p>{{ message }}</p>
</div>

JavaScript代码：

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

在这个例子中，我们创建了一个Vue实例，并将其绑定到id为"app"的元素上。在Vue实例中，我们定义了一个data属性message，并将其初始值设置为空字符串。

在HTML代码中，我们使用了v-model指令将输入框和message属性进行双向数据绑定。这意味着当输入框中的值发生变化时，message属性的值也会跟着变化。同时，当message属性的值发生变化时，输入框中的值也会自动更新。

在p标签中，我们使用了双括号语法{{ message }}来显示message属性的值。

通过这样的设置，我们实现了一个简单的双向数据绑定：用户在输入框中输入内容时，页面上的文本会实时更新；同时，如果我们通过JavaScript代码修改message属性的值，页面上的文本也会随之更新。

这只是一个简单的例子，Vue的双向数据绑定还有更多的用法和特性，可以满足复杂的数据交互需求。