vue学习-03-条件判断与循环-v-show

条件判断：v-if、v-else-if、v-else

	<script>
		var app = new Vue({
			el:'#app',
			data:{
				score: 91,
				is: true
			}
		});
	</script>

	<div id="app" >
			<h2 v-if="score>90">优秀</h2>
			<h2 v-else-if="score>80">良好</h2>
			<h2 v-else-if="score>60">及格</h2>
			<h2 v-else>不及格</h2>
			<br>
			<div v-if="is">v-if如果为false则直接删除标签</div>
			<div v-show="is">v-show如果为false则是将display值设为none</div>
		</div>

v-if和v-show的区别：v-if如果为false则直接删除标签、v-show如果为false则是将display值设为none

循环 v-for

	<script>
		var app = new Vue({
			el:'#app',
			data:{
				count: '0',
				message: 'vue',
				hobbies: ['游戏','音乐','篮球','电影'],
				object:{
					name: 'jack',
					age: '12'
				}
			},
			methods:{
				increase: function(){
					this.count++;
				},
				decrease: function(){
					this.count--;
				}
			}
		});
	</script>

	<div id="app">
			<ul>
				<li v-for="hobby in hobbies">{{hobby}}</li>
			</ul>
			<br>
			<ul>
				<li v-for="(hobby,index) in hobbies">{{hobby}},{{index}}</li>
			</ul>
			<br>
			<!-- 遍历数据是对象：key:对象的属性名，value:对应的值 
				一个值是value
				两个值是value,key
				三个是值value,key,index
			-->
			<ul>
				<li v-for="(value,key,index) in object">{{value}},{{key}},{{index}}</li>
			</ul>
			<br>
			<h2>计数器：{{count}}</h2>
			<button v-on:click="count++">+</button>
			<button v-on:click="count--">-</button>
			<br>
			<button v-on:click="increase">+</button>
			<button v-on:click="decrease">-</button>
		</div>