Vue之v-if/show条件语句与v-for循环语句---kalrry

一、v-if条件语句

1. v-if

<div id="app">
	<p v-if="ok">v-if条件判读</p>
</div>

<script>
	new Vue({
		el: '#app',
		data: {
			ok: true
		}
	})
</script>

2. v-else

随机生成一个数字，判断是否大于0.5，然后输出对应信息：

<div id="app">
	<p v-if="Math.random()>0.5">
		Sorry</p>
	<p v-else>Not Sorry</p>
</div>

<script>
	new Vue({
		el: '#app'
	})
</script>

3. v-else-if

与v-if连用构成if-else if -else结构

<div id="app">
	<p v-if="grade>=85">优秀</p>
	<p v-else-if="grade>=70 && grade<850">良好</p>
	<P v-else-if="grade>=60 && grade<70">及格</P>
	<p v-else>不及格</p>
</div>

<script>
	new Vue({
		el: '#app',
		data:{
			grade: Math.random()*100
		}
	})

4. v-show

我们也可以使用 v-show 指令来根据条件展示元素

<div id="app">
	<p v-show="ok">我们也可以使用 v-show 指令来根据条件展示元素</p>
</div>

<script>
	new Vue({
		el: '#app',
		data: {
			ok: true
		}
	})
</script>

二、v-for 循环指令

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

1. 例：v-for 循环数组渲染列表

<div id="app">
	<li v-for="item in browser">{{item.name}}</li>
</div>

<script>
	new Vue({
		el: '#app',
		data: {
			  browser:[{ name: 'Chrome' },{ name: 'IE' },{ name: 'FireFox' }]
		}
	})
</script>

2. 例：v-for 循环对象渲染列表

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

3. 例：将第二个的参数作为键名

<div id="app">
	<li v-for="(value,key) in person">{{key}}：{{value}}</li>
</div>

<script>
	new Vue({
		el: '#app',
		data: {
			person: {
				name: "Tom",
				age: 16,
				sex: "男"
			}
		}
	})
</script>

4. 例：将第三个参数作为索引

<div id="app">
	<li v-for="(value,key,index) in person">{{key}}：{{value}}--->{{index}}</li>
</div>

5. 例：v-for 循环创建整数列表

<div id="app">
	<li v-for="num in 10">{{num}}</li>
</div>