Vue-v-if及switch的使用

最新推荐文章于 2024-01-24 10:08:34 发布

温柔如風

最新推荐文章于 2024-01-24 10:08:34 发布

阅读量4.8k

点赞数 5

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/qq_36008278/article/details/114581942

版权

Vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了Vue.js中常用的基础指令，包括v-for循环显示数组和对象数据、v-if条件渲染以及v-bind绑定属性等，并通过具体示例展示了这些指令的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先讲下v-for

<meta charset="utf-8">
		<!--1.引入vue.js-->
		<script src="js/vue.js"></script>
		<title> vue的实例</title>
	</head>
	<body>
		<!--2. 指定一个div层，用于绑定vue实例-->
		<div id="app">
			<!--v-pre:不编译模板语法，直接显示-->
			<p v-pre>{{msg}}</p>
			<hr />
			
			<!--显示所有数组中的数据-->
			<p v-for="item in items">{{item}}</p>
			
			<hr />
			<p v-for="val in values">{{val}}</p>
			<hr />
			
			<p v-for="(val,key) in values">{{key}}-{{val}}</p>
			<hr />
			
			<p v-for="(stu,index) in students">{{index}}-{{stu.score}}</p>
			<hr />
			
			<!--v-bind:动态把数据绑定到html属性中，属性不能用{{}}取值-->
			<select>
				<option v-for="obj in objects" v-bind:value="obj.value">{{obj.text}}</option>
			</select>
			<br/><br/><br/><br/><br/>
		</div>
	</body>
	<!--3. 创建vue实例-->
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				msg:100,
				items:[10,20,30,40,50], // 数组类型
				values:{ // json
					title: 'How to do lists in Vue',
					author: 'Jane Doe',
					publishedAt: '2016-04-10'
				},
				students:[ //数组+json
					{score:50},
					{score:80},
					{score:60},
					{score:90}
				],
				objects:{ // json+json
					city1:{text:'请选择',value:-1},
					city2:{text:'湖南',value:1},
					city3:{text:'北京',value:2},
				}
			}
		})
	</script>

在这里插入图片描述
可以正常打印
然后是v-if
很简单看官方文档就能一下子理解,这里写个小案例

	<div class="box">
			<br/><br/><br/><br/>
			<button v-on:click="toggle($event)">显示切换</button>
			<!-- 默认true显示 false隐藏 -->
			<div v-if="toggleValue" class="test" style="width: 100px;height: 100px;background-color: #009E94;"></div>
			<p>结果为:{{toggleValue}}</p>
		</div>
		<script>
			const vm = new Vue({
				el:".box",
				data:{
						toggleValue:true
				},
				methods:{
					// 方法
					toggle(event){
						if(this.toggleValue==true){
							this.toggleValue = false;
						}
						else{
							this.toggleValue = true;
						}
					}
				}
			})
		</script>

最后是switch

<div class="box">
			<input type="text" v-model="num1" />
			<select v-model="type">
				<option v-for="num in nums" :value="num.value">{{num.text}}</option>
			</select>
			<input type="text" v-model="num2" />
			<button v-on:click="math($event)">计算</button>
			<p>结果为:{{sum}}</p>
		</div>
		<script>
			const vm = new Vue({
				el:".box",
				data:{
					nums:{
						type1:{text:'加法',value:0},
						type2:{text:'减法',value:1},
						type3:{text:'乘法',value:2},
						type4:{text:'除法',value:3}
						},
						num1:0,
						num2:0,
						type:0,
						sum:0
				},
				methods:{
					math(event){
						switch(this.type){
							case 0 :this.sum=parseInt(this.num1)+parseInt(this.num2); break;
							case 1 :this.sum=parseInt(this.num1)-parseInt(this.num2); break;
							case 2 :this.sum=parseInt(this.num1)*parseInt(this.num2); break;
							case 3 :this.sum=parseInt(this.num1)/parseInt(this.num2); break;
						}
					}
				}
			})
		</script>

共勉