Vue-v-if及switch的使用

首先讲下v-for

<meta charset="utf-8">
		
		<script src="js/vue.js">script>
		<title> vue的实例title>
	head>
	<body>
		
		<div id="app">
			
			<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 />
			
			
			<select>
				<option v-for="obj in objects" v-bind:value="obj.value">{{obj.text}}option>
			select>
			<br/><br/><br/><br/><br/>
		div>
	body>
	
	<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>

Vue-v-if及switch的使用_第1张图片
可以正常打印
然后是v-if
很简单 看官方文档就能一下子理解,这里写个小案例

	<div class="box">
			<br/><br/><br/><br/>
			<button v-on:click="toggle($event)">显示切换button>
			
			<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>

共勉

你可能感兴趣的:(Vue,vue,js)