vue 单选框绑定v-model

Posted 2023-02-22 _GGG

单选框绑定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>