Vue学习

最新推荐文章于 2024-05-29 17:10:32 发布

An_1999

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量110

点赞数

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/An_1999/article/details/102505999

版权

Vue学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue学习2019/10/11

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

<div id="app">
	   <div v-if="type === 'A'">
	    A
	   </div>
	  <div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
	<h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		type : "B",
		
	}
});

用于根据条件展示元素的选项是 v-show 指令

<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		
		ok : false
	}
});

（v-if对比v-show）
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

（v-if 与 v-for 一起使用）
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

（列表渲染）
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，
其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<div id="app">
	<ul>
		<li v-for="item in items">
		{{ item.message }}
		</li>
	</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		items : [
			{ message: 'Foo' },
			{ message: 'Bar' }
		]
		
	}
});
</script>

v-for 还支持一个可选的第二个参数，即当前项的索引

<div id="app">
	<ul>
		<li v-for="item,index in items">    //获取两个元素，一个是数组的元素item，一个是数组的索引index
		{{index}}{{ item.message }}
		</li>
	</ul>
	
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		items : [
			{ message: 'Foo' },
			{ message: 'Bar' }
		]
		
	}
});
</script>

也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法

尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升

给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

<div id="app">
	<ul>
		<li v-for="item,index in items" :key="index">        //index是具有唯一性的值,他是数组的索引。
		{{index}}{{ item.message }}
		</li>
	</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		items : [
			{ message: 'Foo' },
			{ message: 'Bar' }
		]
		
	}
});
</script>