vue-条件和循环渲染

最新推荐文章于 2024-07-17 16:29:37 发布

奇点435

最新推荐文章于 2024-07-17 16:29:37 发布

阅读量88

点赞数 3

分类专栏： vue 文章标签： html5 前端 html

本文链接：https://blog.csdn.net/weixin_59624094/article/details/129368783

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

v-for的使用方式（通常用在遍历数组中）

v-for="(nav,index) in navbar"

nav：数值 index：索引 navbar：数组

vue中在进行列表渲染的时候，会默认遵守 ‘就地复用策略’。

用key管理可复用的元素，key属性必须是唯一的标识

建议尽量在使用v-for时提供key属性，除非遍历输出的DOM内容非常简单

vue中v-if 和 v-show的区别

1.共同点：v-if 和 v-show 都可以动态地显示DOM元素
2.区别
（1）手段：
v-if 是动态的向DOM树内添加或者删除DOM元素；
v-show 是通过设置DOM元素的display样式属性控制显隐；

当模板属性为true时，控制台显示display：block；

属性为false时，控制台显示display：none。

（2）编译过程：
v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；

（3）编译条件：
v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

（4）性能消耗：
v-if 有更高的切换消耗；
v-show 有更高的初始渲染消耗；

（5）使用场景：
v-if 适合运营条件不大可能改变；
v-show 适合频繁切换。

v-on

v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。

//v-on的使用
<div id="app">
    <input type="button" value="事件绑定" v-on:事件名="方法名">
</div>

//假设如果是点击事件就写click，如果是鼠标移入事件就写monseenter，
//如果是鼠标双击事件就写 dblclick
<div id="app">
	<input type="button" value="事件绑定" v-on:click="方法名">
	<input type="button" value="事件绑定" v-on:mouseenter="方法名">
	<input type="button" value="事件绑定" v-on:dblclick="方法名">
</div>

//方法我们写在methods里面 
<body>
		<div id="app">
			<input type="button" value="事件绑定" v-on:click="todo">
			<input type="button" value="事件绑定" v-on:mouseenter="todo">
			<input type="button" value="事件绑定" v-on:dblclick="todo">
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new Vue({
				el:"#app",
				methods:{
					todo:function() {
						//方法执行的逻辑
					}
				}
			})
		</script>
	</body>

//v-on的简写  用@符号替代v-on  
<div id="app">
	<input type="button" value="事件绑定" @click="todo">
	<input type="button" value="事件绑定" @mouseenter="todo">
	<input type="button" value="事件绑定" @dblclick="todo">
</div>

访问data中的数据,通过this关键字

Hover 功能

@mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是 @mouseout
@mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡。对应的移除事件是 @mouseleave

奇点435

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-条件和循环渲染

nav：数值 index：索引 navbar：数组中在进行列表渲染的时候，会默认遵守 ‘就地复用策略’。用key管理可复用的元素，key属性必须是唯一的标识建议尽量在使用v-for时提供key属性，除非遍历输出的DOM内容非常简单。
复制链接

扫一扫