Vue 关于v-if和v-for不能同时使用的问题

Vue 关于v-if和v-for不能同时使用的问题

           **首先我们先看一下官方文档是怎么写的，如下图，总结来说就是三点**

1. v-if不能和v-for放在同一个标签里一起使用
2. 当使用v-if来判断任何一个属性时，把属性跟改成计算属性（前提是v-if和v-for一起使用）
3. 将v-if放置容器元素上

//html
	<div id="app">
			<ul v-if="Textone">
				<li v-for="i of Textone">我是{{i.name}},今年{{i.age}}岁了！</li>
			</ul>
		</div>

<script>
		var vm =new Vue({
			el:'#app',
			data:{
				arr: [{name:'小明',age:'18'},
					{name:'小红',age:'25'},
					{name:'小刚',age:'28'},
					{name:'小兰',age:'13'},
					{name:'小吕',age:'10'}
				]
			},
			computed:{
				Textone: function(){
					return this.arr.filter(function(i){
						return i.age>=18
						})
				}
			}
		})
	</script>

 **举个例子我们在data里面定义了一个arr数组，现在我们要进行筛选将大于或者等于18岁的人显示出来**

我们要进行if和for的一起使用。首先要把v-if放在容器标签上也就是我们的ul标签

//html
<ul v-if="Textone">

然后定义一个计算属性

<script>
			computed:{
				Textone: function(){
					return this.arr.filter(function(i){
						return i.age>=18
						})
				}
			}
	
	</script>

这里用到了一个JavaScript函数filter过滤函数这个可以自己去看一下我就不说明了

计算属性里面进行了我们的我们想要的结果的一个计算并且返回给我们的Textone方法

//html
			<ul v-if="Textone">

接下来就是在li标签循环出我们的定义的数组，有的小叮当就会问了为什么不直接循环arr呢，而是循环我们的Textone呢？

//html
				<li v-for="i of Textone">我是{{i.name}},今年{{i.age}}岁了！</li>

这是因为我们的程序是由上往下执行的首先执行我们的v-if代码块

//html
			<ul v-if="Textone">

他就会跳到我们的Textone计算属性里面

Textone: function(){
					return this.arr.filter(function(i){
						return i.age>=18
						})
				}

然后他在里面进行计算判断以后把结果返回给Textone，这时候我们就直接调用Textone循环出来就可以了

//html
				<li v-for="i of Textone">我是{{i.name}},今年{{i.age}}岁了！</li>

结果

循环输出arr的结果

//html
				<li v-for="i of arr">我是{{i.name}},今年{{i.age}}岁了！</li>