v-model,它其实就是一个语法糖,作用就是双向绑定表单控件(radio, text,address,email,select,checkbox,textarea)
v-bind(简写形式:value值),用于绑定属性值,只能实现数据的单项绑定。
<template>
<div>
<!--输出 -->
<div class="txt">{{ message }}</div>
<!--双向绑定 -->
<div><input type="text" v-model="message" /></div>
<!--单向绑定 -->
<div><input type="text" v-bind:value="message" /></div>
<!--双向绑定 v-model它实际上是下面这种写法的简写 -->
<div>
<input
type="text"
v-bind:value="message"
@input="message = $event.target.value"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
message: "树欲静而风不止",
};
},
};
</script>
<style scoped>
div {
height: 30px;
}
.txt {
color: red;
}
</style>
当我们修改第一个文本框中的内容时,第二个文本框中的内容也会随之改变,而当手改第二个文本框的内容时,第一个文本框中的内容并不会随之改变。因为第一个文本相的是v-mode 双向数据绑定,而第二个文本框使用的是v-bind 单向数据绑定。