【Vue】v-model在其他表单元素的使用

讲解内容：

常见的表单元素都可以用 v-model 绑定关联 → 快速获取或设置表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框  input:text   ——> value
文本域  textarea	 ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...

浏览器中 $0 表示你当前选中的元素

select下拉框有些特殊，选中 <select> 标签

然后使用$0.value，即可发现选择的这个option的value会实时同步给select的value

并且还不仅可以获取，还可以修改，对应的选项框的内容也会跟着修改

代码示例

<body><div id="app"><h3>小黑学习网</h3>姓名：<input type="text" v-model="username"><br><br>是否单身：<input type="checkbox" v-model="isSingle"><br><br><!-- 前置理解：1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性，用于提交给后台的数据并且通常value用具体的标识，一般不会传字符串文本的，一般是男是1，女是2      结合 Vue 使用 → v-model-->性别:<input v-model="gender" type="radio" name="gender" value="1">男<input v-model="gender" type="radio" name="gender" value="2">女<br><br><!-- 前置理解：1. option 需要设置 value 值，提交给后台option的value里面城市的编码一般是从后台获取的2. select 的 value 值，关联了选中的 option 的 value 值结合 Vue 使用 → v-model-->所在城市:<select v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">成都</option><option value="104">南京</option></select><br><br><!-- 文本域和输入框是类似的 -->自我描述：<textarea v-model="desc"></textarea><button>立即注册</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',isSingle: false,// 标识女选中gender: "2",cityId: '102',desc: ""}})</script>
</body>