v-model修饰符
lazy
<body>
<div id="app">
<!-- 事件修饰符.lazy不会即时的将输入框的内容存放入data -->
<input v-model.lazy="msg">
<span>{ {msg}}</span>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'1111'
}
})
</script>
</body>
number
<body>
<div id="app">
<!-- 修饰符.number把string字符串转为number数字 -->
<input type="number" v-model.number="age">
<span>{ {age}}</span>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
age:''
},
watch:{
age(){
console.log(typeof(this.age));
}
}
})
</script>
</body>
trim
<body>
<div id="app">
<!-- trim屏蔽空格 -->
<input type="text" v-model.trim="msg">
<span>{ {msg.length]}</span>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:''
}
})
</script>
</body>
key属性的作用
提升v-for渲染的效率。.
提高渲染性能。
避免数据混乱的情况出现 。
v-for中key的作用
<body>
<div id="app">
<button @click="lis