从零开始学VUE之模板语法(表单数据绑定)
v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<!--数据双向绑定修改 输入框的值 可以修改name的值-->
<div>
<span>{{name}}</span>
<span>
<input type="text" v-model="name">
</span>
</div>
<!--单选框数据双向绑定 可以省略name属性,如果需要默认选中的话,可以为v-model绑定的属性设置为何value一致的值即可-->
<div>
<label for="man">男</label>
<input type="radio" id="man" value="男" v-model="sex">
<label for="feman">女</label>
<input type="radio" id="feman" value="女" v-model="sex">
选择的性别为:{{sex}}
</div>
<!--单个复选框数据双向绑定-->
<div>
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<button :disabled="!isAgree">下一步</button>
</div>
<!--多个复选框数据双向绑定-->
<div>
<input type="checkbox" value="spring" v-model="checkboxList">spring
<input type="checkbox" value="springMvc" v-model="checkboxList">springMvc
<input type="checkbox" value="springBoot" v-model="checkboxList">springBoot
{{checkboxList}}
</div>
<!--单选下拉框数据双向绑定-->
<div>
<select name="fruit" v-model="fruit">
<option value="火龙果">火龙果</option>
<option value="樱桃">樱桃</option>
<option value="杨梅">杨梅</option>
</select>
{{fruit}}
</div>
<br>
<!--多下拉框数据双向绑定,这里存在一个问题,多选的时候需要按ctrl+鼠标点击,才可以,如果是单纯的点击只能选择一个,不过不用担心,后面也不适用原生的,会使用UI组件,里面已经修复了这个问题-->
<div>
<select name="fruits" multiple="multiple" v-model="fruits">
<option value="火龙果">火龙果</option>
<option value="樱桃">樱桃</option>
<option value="杨梅">杨梅</option>
</select>
{{fruits}}
</div>
</div>
</div>
</body>
<script>
// 创建vue
const vue = new Vue({
el: '#app',
data: {
name: '彼岸舞',
// 默认选中男
sex:'男',
// 默认为不勾选
isAgree:false,
checkboxList:[],
fruit:'',
fruits:[]
}
})
</script>
</html>
修饰符
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" > <!-- 将默认的字符串类型,转换为数字类型--> <input v-model.number="age" type="number"> <!--获取值得时候自动去除两边的空格--> <input v-model.trim="msg">
|
参数 |
说明 |
|
.lazy |
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步 |
|
.number |
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型 |
|
.trim |
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入 |
作者：彼岸舞
时间：2021\05\31
内容关于：VUE
本文属于作者原创,未经允许,禁止转发
