Vue 属性绑定示例：实时更新数据
<!DOCTYPE html>
<html>
<head>
<title>Vue 属性绑定示例：实时更新数据</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<input type="text" v-bind:value="message" v-on:input="updateMessage">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
updateMessage: function(event) {
this.message = event.target.value;
}
}
});
</script>
</body>
</html>
在上面的示例中，我们创建了一个 Vue 实例，并在 data 选项中定义了一个属性 `message`，它的初始值为 'Hello Vue!'。然后，我们使用 `v-bind` 指令将 `message` 属性绑定到了 input 元素的 `value` 属性上，这样 input 的值就会随着 `message` 属性的变化而更新。当 input 的值发生变化时，我们使用 `v-on` 指令监听 `input` 事件，并调用 `updateMessage` 方法来更新 `message` 属性的值。
<p>最后，通过 <code>{{ message }}</code> 我们将 <code>message</code> 属性的值显示在页面上。</p>
<p>这就是一个简单的 Vue 属性绑定的示例。希望对你有所帮助！</p>
原文地址: https://www.cveoy.top/t/topic/qzbw 著作权归作者所有。请勿转载和采集!