本文档介绍了Vue.js中的核心特性——双向数据绑定，通过一个简单的实例展示了如何定义变量、绑定到文本框并实现数据的实时同步。在Vue.js中，当视图层的数据发生变化时，数据模型也会相应更新。通过`v-model`指令，可以轻松地在输入元素和数据模型之间建立连接，实现实时反馈。
Vue.js入门教程—双向数据绑定(5)
一、双向数据绑定
双向数据绑定，最早的概念来源于angular.js. 当视图层的数据发生变化, 数据也会发生相应的变化。
二、使用步骤
1. 定义变量
new Vue({
el: '#app',
data: {
message: "" //定义一个message变量
}
})
2. 绑定到文本框
<input v-model="message" /> //这里的message名字要和变量名一致
<br />
输出内容: {{message}} //输出输入的内容
3. 运行效果
文本框输入任意内容，数据就会对应的变化。
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message" />
<br />
你输入的内容：{{message}}
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: "" //定义一个message变量
}
})
</script>
</body>
</html>
1105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
