调了半天没反应,结果是没引用Vue,我是伞兵。
v-model
的作用是将视图与数据双向绑定。一般情况下,Vue是数据驱动的,即数据发生改变后网页就会刷新一次,更改对应的网页内容,即数据单向绑定了网页内容。而使用v-model
双向绑定之后,网页发生改变(例如输入框)也会对应的修改数据。方便我们快速的修改/获取网页上的内容。
语法为v-model=变量名
一个简单的实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
<label>用户名:<input type="text" v-model="username" placeholder="请输入用户名"></label> <br><!--br是换行符-->
<button @click="reset">重置</button>
</div>
<script>
const app = new Vue({
el: "#app",
data:{
username: ""
},
methods:{
reset(){
this.username = ""
}
}
})
</script>
</body>
</html>
在这个例子中,直接修改数据或者在输入框里输入内容都会直接的影响另一方的数据。