1.v-model双向绑定的基本使用
在表单控件或者组件上创建双向绑定?
<body>
<div id="app">
<!-- <input type="text" v-model="message"> -->
<input type="text" v-bind:value="message" v-on:input="valueChange">
<h2>{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好'
},
methods: {
valueChange(event) {
this.message = event.target.value
}
}
})
</script>
</body>
2.v-model中修饰符的使用
- .lazy 。在事件触发之后再与值同步
- .number。可以将输入的字符串转换为数字
- .trim。自动过滤输入值首尾的空格
<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>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
age: 0,
name: ''
}
})
</script>
</body>
3.v-model与单选框的使用
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" name="sex" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex">女
</label>
<h2>您选中的性别是：{{sex}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
sex: ''
}
})
</script>
</body>
?4.v-model与checkbox的使用
<body>
<div id="app">
<!-- ----------------单选框-------------------- -->
<label for="accept">
<input type="checkbox" id="accept" v-model="isAgree">同意协议
</label>
<h2>您的选择是：{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
<hr>
<!-- ----------------多选框-------------------- -->
<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>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isAgree: false,
hobbies: []
}
})
</script>
</body>
?5.v-model与select类型的使用
<body>
<div id="app">
<!-- ----------------单选框-------------------- -->
<select name="abc" id="" v-model="fruit">
<option value="苹果" >苹果</option>
<option value="香蕉" >香蕉</option>
<option value="菠萝" >菠萝</option>
<option value="葡萄" >葡萄</option>
</select>
<h2>您选择的水果是：{{fruit}}</h2>
<hr>
<!-- ----------------多选框-------------------- -->
<select name="abc" id="" v-model="fruits" multiple>
<option value="苹果" >苹果</option>
<option value="香蕉" >香蕉</option>
<option value="菠萝" >菠萝</option>
<option value="葡萄" >葡萄</option>
</select>
<h2>您选择的水果是：{{fruits}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
fruit: '苹果',
fruits: []
}
})
</script>
</body>
|