Vue学习------------（15）v-model实现双向绑定
v-model是v-on和v-bind的结合
v-model绑定的是value属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
//v-model实现双向绑定
<input type="text" v-model="messageOne">
<h2>{{messageOne}}</h2>
<br>
//手动实现双向绑定
<input type="text" :value="messageTwo" @input="valueChange">
<input type="text" :value="messageTwo" @input="messageTwo = $event.target.value">
<h2>{{messageTwo}}</h2>
<h2>{{messageTwo}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
data: {
messageOne: '你好啊',
messageTwo: '你好啊'
},
methods: {
valueChange(event) {
this.messageTwo = 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="男" v-model="gender">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="gender">女
</label>
<h2>您选择的性别是：{{gender}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
data: {
gender: '男'
}
})
</script>
</body>
</html>
v-model结合checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
//checkbox单选框
<label for="protocal">
<input type="checkbox" id="protocal" v-model="isAgree">同意协议
</label>
<button :disabled="isAgree">下一步</button>
//多选框
<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">乒乓球
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
data: {
isAgree: false,
hobbies: []
}
})
</script>
</body>
</html>
v-model与select结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="葡萄">葡萄</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
</select>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
data: {
fruit: '榴莲'
}
})
</script>
</body>
</html>
input中的值绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label v-for="item in originHobbies" :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: {
hobbies: [],
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球']
}
})
</script>
</body>
</html>
v-model修饰符
- lazy修饰符：
- 默认情况下，v-model是在input事件中同步输入框的数据
- 即一旦有数据发生改变对应data中的数据就会自动发生改变
- lazy修饰符可以让数据在失去焦点或者回车时才更新
- number修饰符：
- 默认情况下，输入框中无论输入的是字母还是数字，都会被当做字符串类型进行处理
- number修饰符可以让在输入框中输入的内容自动转换成数字类型
- trim修饰符：
- 如果输入的内容首尾有很多空格，通常我们希望将其去除
- trim修饰符可以过滤内容左右两边的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
//lazy
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
//number
<input type="number" v-model.number="age">
//trim
<input type="text" v-model.trim="name">
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
data: {
message: '你好啊',
age: 20,
name: ' '
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号