详解vue中v-model和v-bind绑定数据的异同

详解Vue中v-model和v-bind绑定数据的异同：

1.什么是 v-model 和 v-bind

v-model 和 v-bind 是 Vue 常用的两个指令，它们都用于进行数据绑定。其中：

• v-model 用于实现表单控件的双向绑定。
• v-bind 用于单向绑定，可动态绑定 HTML 属性。

2.v-model 与 v-bind 的区别

2.1 数据更新方式

v-model 绑定的是表单控件的 value 值，当表单控件的值发生变化时，双向绑定的数据也会随之更新。而 v-bind 绑定的是属性，当数据发生变化时，只会改变绑定元素的属性值，不会触发元素上的事件或改变元素的值。

2.2 常见的使用场景

v-model 通常用于 input、select、textarea 等表单元素上，实现双向数据绑定。以 input 为例：

<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

以上代码中，当 input 中的 value 发生变化时，同时更新了 data 中的 message 值，并将 message 回显至页面上。

v-bind 则通常用于动态绑定 HTML 属性，如下代码：

<template>
  <div>
    <button v-bind:class="btnClass">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  },
  computed: {
    btnClass() {
      return this.isActive ? 'active' : 'inactive'
    }
  }
}
</script>

以上代码中，根据 computed 中的 btnClass 属性判断 isActive 值，并根据值的不同动态绑定 button 的 class，从而达到不同状态的样式效果。

2.3 注意事项

使用 v-model 时需要注意以下事项：

• v-model 只会将 input、textarea、checkbox、radio、select 等表单元素上的 value 值与 data 中的属性双向绑定。
• 对于自定义组件，需要在组件内部使用 value 和 $emit，手动实现双向绑定，详见 Vue 官方文档。

使用 v-bind 时需要注意以下事项：

• v-bind 只能用于绑定属性，不能绑定元素。
• 可以使用简写的冒号语法，如：v-bind:href 等价于 :href。

3.示例说明

3.1 v-model 的示例

以下是一个简单的登录表单示例，用于演示 v-model 的用法：

<template>
  <div>
    <form>
      <label for="username">用户名</label>
      <input type="text" id="username" v-model="username">
      <label for="password">密码</label>
      <input type="password" id="password" v-model="password">
      <button type="submit" @click.prevent="handleSubmit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      console.log(this.username, this.password);
    }
  }
}
</script>

以上代码中，我们绑定了 username 和 password 两个表单元素的 value 值到 data 中，表单元素值变化时直接更新 data 中的属性值；当点击登录按钮时，调用了 handleSubmit 方法去捕获当前表单的值。

3.2 v-bind 的示例

以下示例用于动态绑定 img 标签的 src 属性：

<template>
  <div>
    <img :src="imgSrc" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: 'https://placeimg.com/640/480/any'
    }
  }
}
</script>

以上代码中，使用了冒号(:)语法简写 v-bind，动态绑定了 img 标签的 src 属性到 data 中的 imgSrc，这样我们只需要改变 imgSrc 的值就可以动态改变图片的 src。