单选框绑定v-model
单选框radio绑定v-model绑定的值为radio的value值,而单个复选框checkbox绑定的值则是true 和 false
案例:演示使用单选框切换显示的界面
导入vue:
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
html代码:
<div id="box">
<p class="radios">
<input type="radio" name="ck" value="1" v-model="check" />Imgs
<input type="radio" name="ck" value="2" v-model="check" />Ebook
<input type="radio" name="ck" value="3" v-model="check" />Model
</p>
<div class="imgs" v-if="check==1">
<!-- 壁纸展示&下载 -->
</div>
<div class="txts" v-else-if="check==2">
<!-- 电子书展示&下载 -->
</div>
<div class="model" v-else-if="check==3">
<!-- 模板展示&下载 -->
</div>
</div>
css:
.imgs{
background-color: #000000;
height: 680px;
}
.txts{
background-color: #14AFFF;
height: 680px;
}
.model{
background-color: #007DDB;
height: 680px;
}
js:
<script type="text/javascript">
var ve = new Vue({
el: "#box",
data: {
check: 1
}
})
</script>