没有优美的页面,仅仅是实现功能而已。
最近在重新学习vue,也会写一些小demo,希望对同时新手的你有帮助!
1.单个复选框绑定布尔值
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked" value="html">
<label for="checkbox">{{checked}}</label>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
checked:true
}
})
</script>
2.多选框
<div id="app">
<input type="checkbox" id="html" v-model="checked" value="html">
<label for="html">html</label><br>
<input type="checkbox" id="js" v-model="checked" value="js">
<label for="js">js</label><br>
<input type="checkbox" id="css" v-model="checked" value="css">
<label for="css">css</label><br>
<p>已选:{{checked}}</p>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
checked:[],
},
methods:{
}
})
</script>
3.选择列表,单表控件,加了multiple就可以多选了
<div id="app">
<select v-model="selected"><!–在这里添加multiple就可以多选了–>
<option>html</option>
<option>js</option>
<option>css</option>
</select>
<p>已选:{{selected}}</p>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
selected:[],
},
methods:{
}
})
</script>
4.v-model后跟.lazy不实时更新
.number转换成Number型
.trim自动过滤首尾空格
<div id="app">
<input type="text" v-model.lazy="meesage"><!--message并不实时改变,而是文本框失焦或回车键时才更
新-->
<p>{{meesage}}</p>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
meesage:'',
},
methods:{
}
})
</script>