v-model的使用
v-model的作用
实现数据的双向绑定
<div id="app">
<input type="text" v-model="message"/>
<h2>{{message}}</h2>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
message: 'hello world'
}
})
</script>
v-model的原理
v-model实现数据双向绑定的操作实际上相当于两个指令的结合,v-bind动态绑定数据并渲染到input上,v-on:input = “”实时监听数据改变并将数据赋值给message
<div id="app">
<input type="text" :value="message" @input="valueChange"/>
<h2>{{message}}</h2>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
message: 'hello world'
},
methods:{
valueChange(event){
//event为产生事件后浏览器自己生成的对象,该event对象就包含了事件所有的信息
this.message = event.target.value;
}
}
})
</script>
v-model结合radio(单选框)类型使用
要实现radio单选项的互斥,必须设置一个属性name = “sex”,但是用了v-model属性绑定了同一个sex实现了互斥,提交时只会提交一个选中项,就不需要再定义name属性了。
<div id="app">
<label for="male">
<input type="radio" v-model="sex" id="male" value="男">男
</label>
<label for="female">
<input type="radio" v-model="sex" id="female" value="女">女
</label>
<h2>您选择的性别是:{{sex}}</h2>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
sex: ''
}
})
</script>
v-model结合checkbox(复选框)类型使用
复选框分为两种情况:单个勾选框和多个勾选框
单选框:
<!-- checkbox单选框案例 -->
<div id="app">
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>您选择的是{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
isAgree: false //单选框
}
})
</script>
复选框:
<div id="app">
<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 src="js/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
isAgree: false, //单选框
hobbies: [] //复选框
}
})
</script>
v-model结合select使用(单/复选框)类型使用
<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>
<!-- 单选下拉框,按住ctrl键选择多个 -->
<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 src="js/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
fruit: '香蕉',
fruits: []
}
})
</script>
值绑定概念(input)
对于单选按钮,复选框及选择框的选项,v-model绑定的值通常是静态字符串,但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上,这时可以用v-bind实现,并且这个属性的值可以不是字符串。
<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 type="text/javascript">
let app = new Vue({
el:'#app',
data:{
isAgree: false,
hobbies: [],
originHobbies: ['篮球','足球','乒乓球','羽毛球','台球','高尔夫']
}
})
</script>
修饰符
lazy修饰符(懒加载):
默认情况下,v-model默认是在input事件中同步输入框的数据,也就述说数据是根据输入框所输入数据实时加载的,这样性能开销较大
lazy修饰符可以让数据在失去焦点或者回车时才会更新
<input type="text" v-model.lazy="message">
number修饰符:
默认情况下,在输入框输入任何东西都会被判定为字符串类型进行处理
但如果我们希望处理的是数字类型,那么最好直接将内容当作数字进行处理
number修饰符可以让在输入框中输入的内容自动转成数字类型
<input type="number" v-model.number="age">
trim修饰符:
如果输入内容首尾有很多空格,通常我们希望将他们去除
trim修饰符可以过滤内容左右两边的空格
<input type="text" v-model.trim="message2">