参考书籍《Vue.js快跑:构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-9双向数据绑定
不能使用v-bind:value——使用v-bind只会在inputValue值变化时才更新输入框的值,反过来则不行。作为替代,可以使用v-model指令,它作用于输入框元素,将输入框的值绑定到data对象的对应属性上,因此输入框不但会接收data上的初始值,而且当输入内容更新时,data上的属性值也会更新。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数据的双向绑定title>
head>
<body>
<div id="app">
<div>{{inputValue}}div>
v-model:<input type="text" v-model="inputValue"><br>
v-bind: <input type="text" v-bind:value="inputValue">
div>
<script src="https://unpkg.com/vue">script>
<script>
new Vue({
el: "#app",
data: {
inputValue: "我是默认值"
}
})
script>
body>
html>
content