vue指令_v-model基础使用

vue指令 v-model

目标: 把value属性和vue数据变量, 双向绑定到一起

• 语法: v-model=“vue数据变量”
• 双向数据绑定
  • 数据变化 -> 视图自动同步
  • 视图变化 -> 数据自动同步

<template>
  <div>
      <!-- 1. input  标签 -->
      姓名：<input v-model="username" type="text"><br>

      <!-- 2. select  标签 -->
      <!-- v-model 基于 value 进行的封装 -->
      来自哪里：
      <select v-model="city">
          <option value="广州市">广州</option>
          <option value="北京市">北京</option>
          <option value="深圳市">深圳</option>
      </select>
      <br>

      <!-- 3.单选按钮，复选按钮 -->
      性别：
      <label><input type="radio" name="gender" value="男" v-model="sex">男</label>
      <label><input type="radio" name="gender" value="女" v-model="sex">女</label>
      <br>

      爱好：
      <label><input type="checkbox" name="gender" value="吃饭" v-model="hobbies">吃饭</label>
      <label><input type="checkbox" name="gender" value="睡觉" v-model="hobbies">睡觉</label>
      <label><input type="checkbox" name="gender" value="敲代码" v-model="hobbies">敲代码</label><br>

      <!-- 复选框特殊情况 -->
      <input v-model="ischeck" type="checkbox">我已阅读并同意<br>

      <!-- 4.文本 -->
自我介绍：<br>
<textarea v-model="intro" placeholder="说些什么吧~" ></textarea>

  </div>
</template>

<script>
export default {
    data () {
        return {
            username:"",
            city:"",
            // vue 注重的都是数据操作，不是 DOM 的操作
            // 默认选中 男
            sex:"男",
            // 💥爱好的复选框，可以选择多个，需要写成数组
            hobbies:["敲代码"],
            // 复选框情况2：获取布尔值
            ischeck:false,
            intro:""
        }
    }

}
</script>

<style>

</style>