v-model和v-bind

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 单向数据绑定。