Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox（多选）、checked（值的绑定）、select以及修饰符的使用
一、v-model使用原理v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。先看一下简单的v-model使用<!DOCTYPE html><html><head><meta charset="utf-8"><title>v-model的
·
一、v-model使用原理
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
先看一下简单的v-model使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model的基本使用</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<input type="text" v-model="message" />
<input type="text"v-model="message" />
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
message:'Nanchen'
},
})
</script>
</body>
</html>
效果如下：
为什么要用到v-model？
使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。
其使用原理：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model的使用原理</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<input type="text" @input="changeValue" :value="message" />
<!-- <input type="text"v-model="message" /> -->
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
message:'Nanchen'
},
methods:{
changeValue(e){
console.log(e);
this.message = e.target.value
}
}
})
</script>
</body>
</html>
oninput 事件在用户输入时触发。
详情请参考菜鸟教程oninput
效果与上图一致。
二、v-model结合radio单选按钮使用
以前写单选按钮：
<label for="one">
<input type="radio" name="sex" id="one" value="男"/>男
</label>
<label for="two">
<input type="radio" name="sex" id="two" value="女"checked="checked" />女
</label>
<h1></h1>
现在要实现双向绑定功能，就是点击哪个性别就会显示在h1里
这里就可以把name去掉，添加v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<label for="one">
<input type="radio" id="one" value="男" v-model="sex" />男
</label>
<label for="two">
<input type="radio" id="two" value="女" v-model="sex"/>女
</label>
<h5>{{sex}}</h5>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
sex:'男'
},
})
</script>
</body>
</html>
三、v-model结合checkbox类型的使用
这里实现一个同意协议的小功能，先看效果：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>复选框</h1>
<label for="one">
<input type="checkbox"id="one" v-model="isAgree" />同意协议
</label>
<br>
您选择的是：{{isAgree}}
<br>
<button type="button" :disabled="!isAgree">下一步</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
isAgree:true
},
})
</script>
</body>
</html>
四、v-model结合checkbox类型使用（多选）
先看实现效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<label for="hobby">
<input type="checkbox" id="hobby" value="篮球" v-model="hobbies">篮球
</label>
<label for="hobby1">
<input type="checkbox" id="hobby1" value="足球" v-model="hobbies">足球
</label>
<label for="hobby2">
<input type="checkbox" id="hobby2" value="羽毛球" v-model="hobbies">羽毛球
</label>
<label for="hobby3">
<input type="checkbox" id="hobby3" value="排球" v-model="hobbies">排球
</label>
<h2 v-show="hobbies.length>0">{{hobbies}}</h2>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
hobbies:[]
},
})
</script>
</body>
</html>
五、v-model结合checkbox类型使用（值的绑定）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<label :for="index" v-for="(item,index) in arr" :key="index">
<input type="checkbox" :name="'hobby'+index" :id="index" :value="item" v-model="hobbies" />
{{item}}
</label>
<h2 v-if="hobbies.length>0">{{hobbies}}</h2>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
hobbies:[],
arr:['篮球','足球','羽毛球','排球'],
},
})
</script>
</body>
</html>
六、v-model结合select
1.select单选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>select单选</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<select name="fruit" v-model="fruit">
<option value="苹果">苹果</option>
<option value="橘子">橘子</option>
<option value="水蜜桃">水蜜桃</option>
<option value="橙子">橙子</option>
</select>
<h3>你选择的水果有：{{fruit}}</h3>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
fruit:'苹果',
},
})
</script>
</body>
</html>效果如下：
2.select多选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>select多选</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<select name="fruits" v-model="fruits" multiple="multiple">
<option value="苹果">苹果</option>
<option value="橘子">橘子</option>
<option value="水蜜桃">水蜜桃</option>
<option value="橙子">橙子</option>
</select>
<h3 v-show="fruits.length>0">你选择的水果有：{{fruits}}</h3>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
fruits:[],
},
})
</script>
</body>
</html>
效果如下：
七、v-model的修饰符的使用
v-model的修饰符：
1、v-model.lazy 只有在input输入框发生一个blur时才触发
2、v-model.trim 将用户输入的前后的空格去掉
3、v-model.number 将用户输入的字符串转换成number
这里看这个例子
v-model.lazy
只有在input输入框发生一个blur时才触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<input type="text" v-model.lazy="message"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:'Nan',
age:30,
name:'chen'
},
})
</script>
</body>
</html>
效果如下：
v-model.number ：不可以输入字符串
看例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="number" v-model.number="age" />
<h2>{{age}}----{{typeof age}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:'Nan',
age:30,
name:'chen'
},
})
</script>
</body>
</html>
效果如下：这里输入字符串是输入不了的
v-model.trim
去除前后空格
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model.trim="name">
<h2>{{name}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:'Nan',
age:30,
name:'chen'
},
})
</script>
</body>
</html>
效果如下图：
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献20条内容
所有评论(0)