v-model 可以用在input中也可以用在textarea中 。
包含两个指令:
一个v-bind,把message的值时时放到value中,
另一个v-on,给当前元素绑定input事件,将event.target.value赋值给message
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-model 可以用在input中也可以用在textarea中 。
他包含两个指令:
一个v-bind,把message的值时时放到value中,
另一个v-on ,给当前元素绑定input事件
-->
<input type="text" v-model="message">
<!--上面的代码等同于下方的 -->
<input type="text" v-bind:value="message" @input="changeValue">
<!-- 绑定事件中 -->
<!-- <input type="text" v-bind:value="message" @input="changeValue"> -->
<!-- 可以直接写在监听事件里 -->
<!-- <input type="text" v-bind:value="message" @input="message = $event.target.value"> -->
<h2> {{message}}</h2>
</div>
<script>
// 方法调用多次时,会执行多次
// 但计算属性有缓存,计算属性相关的值若不发生改变,计算属性只会执行一次,如果修改值的话,也是只执行一次。
const app = new Vue({
el: '#app',
data: {
message: '你好啊,加油啊',
},
methods: {
changeValue(event) {
//有事件时会产生event(里面包含想要的信息)
// 在上面的html中不需要加,在此传的event会自动传过去
//这个target.value是最新的value,复制给message即可
this.message = event.target.value
}
}
})
</script>
</body>
</html>