本文详细介绍了Vue.js中的v-model特性，包括其基本使用、与radio、checkbox、select的结合以及修饰符的应用。通过实例展示了v-model如何实现双向数据绑定，并在不同场景下的用法，帮助读者深入理解v-model的工作原理和实际操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-model
1.双向绑定，表单元素的值变化则绑定的数据也会变化
2.会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。
3.应该通过 JavaScript 在组件的 data 选项中声明初始值。
-->
<!-- v-model 的基本使用 -->
<div id="app1">
<input type="text" v-model="msg" @keydown="seeMsg()">
{{msg}}
</div>
<script>
const app1 = new Vue({
el: '#app1',
data: {
msg: 'hello Vue.js!'
},
methods: {
seeMsg: function() {
console.log(this.msg);
}
}
})
</script><br><hr><br>
<!-- v-model 与 radio 结合,此处无需name -->
<div id="app2">
<label for="male">
<input type="radio" value="男" id="male" v-model="sex">男
</label>
<label for="female">
<input type="radio" value="女" id="female" v-model="sex">女
</label>
<p>您的性别是：{{sex}}</p>
</div>
<script>
const app2 = new Vue({
el: '#app2',
data: {
sex: '男'
}
})
</script><br><hr><br>
<!-- v-model 与 checkbox 结合 -->
<div id="app3">
<input type="checkbox" id="agree" v-model="isAgree">同意《xxxx协议》
<br>
<button :disabled="!isAgree">下一步</button>
<br><br>
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<p>您的爱好是:{{hobbies}}</p>
</div>
<script>
const app3 = new Vue({
el: '#app3',
data: {
isAgree: false,
hobbies: []
}
})
</script><br><hr><br>
<!-- v-model 与 select 结合 -->
<div id="app4">
<!-- 选择一个 -->
<select name="" id="" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<p>您选择的是：{{fruit}}</p>
<!-- 选择多个 -->
<select name="" id="" multiple v-model="fruits">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<p>您选择的是：{{fruits}}</p>
<!-- 值绑定: input的值可以动态绑定 -->
<label v-for="item in people" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="peopleChoosed">{{item}}
</label>
<p>您勾选的人：{{peopleChoosed}}</p>
</div>
<script>
const app4 = new Vue({
el: '#app4',
data: {
fruit: "苹果",
fruits: [],
people: ['虚哥',"济钢","鸡哥","大鹏"],
peopleChoosed: []
}
})
</script><br><hr><br>
<!-- v-model的修饰符 -->
<div id="app5">
<!-- lazy: 失去焦点后才时时绑定-->
<input type="text" v-model.lazy="msg">
<p>{{msg}}</p>
<!--
number
一般情况的话 v-model 给变量赋值默认为字符串类型
使用 number 修饰符后赋值为数字类型
-->
<input type="text" v-model.number="age">
<p>{{age}} - {{typeof age}}</p>
<!-- trim: 去除空格 -->
<input type="text" v-model.trim="name">
<p>您输入的名字：{{name}}</p>
</div>
<script>
const app5 = new Vue({
el: "#app5",
data: {
msg: 'hello Vue.js!',
age: '',
name: ''
}
})
</script>
</body>
</html>
更多相关内容大家可以前往我的个人博客浏览：eyes++的个人空间
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
