v-model的简介
v-model是一个指令,限制在<input>、<select>、<textarea>、components中使用,实现数据-视图、视图-数据的双向绑定。
v-model的使用以及实例体现v-model的双向绑定
<template>
<div class="hello">
<input v-model="inputData" />
<p>输入的内容为:{
{ inputData }}</p>
<button @click="changeInputData">点击</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
inputData: "",
};
},
methods: {
changeInputData() {
this.inputData = this.inputData + "a";
},
},
};
</script>
<style scoped>
</style>
当在输入框中输入内容时,会引起下面内容(inputData)的变化;当点击按钮改变 inputData的变化时,