v-model的使用
使用以及原理叙述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<h3>{{message}}</h3>
<!-- 原理：1.v-bind绑定一个value属性 2. v-on指令给当前元素绑定input事件拿到当前输入框的值-->
<!--<input type="text" :value="message" v-on:input="valueChange($event)">-->
<!--<input type="text" :value="message" v-on:input="message = $event.target.value">-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods: {
valueChange(event){
console.log(event);
this.message = event.target.value
}
}
})
</script>
</body>
</html>
v-model与radio结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" name="sex" v-model="sex">男
</label>
<!--其实可以把上下input标签的name属性去掉，key去掉 因为在v-model已经表明了name这个key-->
<label for="female">
<input type="radio" id="female" value="女" name="sex" v-model="sex">女
</label>
<h3>你选择的性别是： {{sex}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
sex: '男' // 默认是男
}
})
</script>
</body>
</html>
v-model与checkbox的结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1. v-model与checkbox单选框的使用-->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>你选择的是：{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
<br>
<!--2. v-model与checkbox多选框的使用-->
<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">电影
<h2>你的选择是：{{hobbies}}</h2>
<!--3. 值绑定-->
<label v-for="item in orderHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isAgree: false, // 布尔类型
hobbies: [], // 数组类型
orderHobbies: ['台球', '足球', '篮球', '旅游', '音乐', '电影']
}
})
</script>
</body>
</html>
v-model与select的结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1. select选择一个-->
<select name="fruit" v-model="fruit">
<option value="香蕉">香蕉</option>
<option value="苹果">苹果</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
<option value="草莓">草莓</option>
</select>
<h3>你的选择是: {{fruit}}</h3>
<!--2. select选择多个-->
<select name="fruit" v-model="fruits" multiple>
<option value="香蕉">香蕉</option>
<option value="苹果">苹果</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
<option value="草莓">草莓</option>
</select>
<h3>你的选择是: {{fruits}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
fruit: '香蕉',
fruits: []
}
})
</script>
</body>
</html>
v-model的修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1. .lazy修饰符 失去焦点或者敲回车才去绑定数据-->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<!--2. .number修饰符 输入的数字自动转换成数字类型 输入的东西都是字符串类型-->
<input type="number" v-model.number="age">
<h2>{{age}}---{{typeof age}}</h2>
<!--3. .trim修饰符 去掉空格-->
<input type="text" v-model.trim="name">
<h2>{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
age: '',
name: ''
}
})
</script>
</body>
</html>
mvvm在初体验中有介绍三层，双向绑定，响应式
