Vue应用（四）---if、for、数组变更检测、过滤/排序显示

最新推荐文章于 2024-06-06 10:24:55 发布
最新推荐文章于 2024-06-06 10:24:55 发布
阅读量895 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hurricane_li/article/details/80715811
版权 



<!-- 条件渲染,迭代渲染、数组变更检测、过滤/排序显示、自定义组件的v-for使用 -->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<!-- 条件渲染 -->
	<div id="app">
	  <h1 v-if="ok==1">Yes1</h1>
	  <h1 v-else-if="ok==2">Yes2</h1>
	  <h1 v-else>No</h1><!-- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 -->

	  <!-- 这里最好使用template，若将template换为abc，可以实现同样的功能，
	  	   但是template不会渲染出来，abc则会渲染出来 -->
	  <template v-if="ok">
	    <h1>Title</h1>
	    <p>Paragraph 1</p>
	    <p>Paragraph 2</p>
	  </template>
	  <!-- v-show同样可以控制元素是否显示，不同的是v-if控制是否渲染,v-show控制display属性 -->
	  <!-- v-show不支持 <template> 元素，也不支持v-else -->
	  <h1 v-show="ok">Hello!</h1>
	</div>
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
		     ok: 1
		   }
		})
	</script>
	<!-- 控制复用 -->
	<div id="app-2">
	  <template v-if="loginType === 'username'">
	    <label>Username</label>
	    <input placeholder="Enter your username">
	  </template>
	  <template v-else>
	    <label>Email</label>
	    <input placeholder="Enter your email address">
	  </template>
	  <!-- 添加key属性，可以禁止复用 -->
	  <template v-if="loginType === 'username'">
	    <label>Username</label>
	    <input placeholder="Enter your username" key="username-input">
	  </template>
	  <template v-else>
	    <label>Email</label>
	    <input placeholder="Enter your email address" key="email-input">
	  </template>
	</div>
	<script type="text/javascript">
		var app2 = new Vue({
		  el: '#app-2',
		  data: {
		     loginType: 'username',
		   }
		})
	</script>
	
	<!-- 迭代渲染，迭代数组时,可以传一个值代表数组元素,也可以传两个值，第一个值是数组元素，第二个值是索引 -->
	<!-- 迭代数组时,变异方法会触发视图的更新，非变异方法不会触发视图更新，但是可以用非变异方法返回的数组赋值给原来的
		 数组，当利用索引直接设置一个项时或当修改数组的长度时，不会触发视图更新,这种操作是可以通过其他方式实现的，如：Vue.set(app3.items,3,{'message':123})，app3.$set(app3.items,2,{'message','msg'})-->
	<div id="app-3">
	  <ul id="example">
	    <li v-for="item in items">
	      {{ item.message }}
	    </li>
	  </ul>
	  <ul id="example2">
	    <li v-for="(item, index) of items">
	      {{ parentMessage }} - {{ item.message }} - {{ index }}
	    </li>
	  </ul>
	  <!-- 迭代一个对象的属性,可以传一个值代表属性值,也可以传两个值，第一个值是属性值，第二个值是属性名,
	  	   也可以传三个个值，第一个值是属性值，第二个值是属性名，第三个值是索引 -->
	  <ul id="example3">
	    <li v-for="val of obj">
	      {{val}}
	    </li>
	  </ul>
	  <ul id="example3">
	    <li v-for="(val, key) of obj">
	      {{key}} - {{val}}
	    </li>
	  </ul>
	  <ul id="example3">
	    <li v-for="(val, key,index) of obj">
	      {{key}} - {{val}} - {{index}}
	    </li>
	  </ul>
	</div>
	<script>
		var app3 = new Vue({
		  el: '#app-3',
		  data: {
		  	parentMessage: 'Parent',
		    items: [
	          { message: 'Foo' },
	          { message: 'Bar' }
	        ],
	        obj:{
	        	name:'hurricane',
	        	pwd:'123',
	        	sex:'male'
	        }
		    
		  }
		})
	</script>

	<!-- 数组变更检测，为已有对象赋予多个新属性，比如使用 Object.assign() 或$.extend(),这种情况下，你应该用两个对象
		 的属性创建一个新的对象。所以，如果你想添加新的响应式属性,使用Object.assign({},已有响应式属性名,新添加的
		 属性) -->

	<!-- 过滤/排序显示，显示过滤/排序结果,几种方式：计算属性、方法、v-for与v-if连用（v-for与v-if处于同一节点时，v-for有更高的优先级，即v-for迭代的每一项都执行一次v-if判断，若要使v-if有更高的优先级，可以将v-if放到外层节点上） -->
	<div id="app-4">
	  <ul>
	  	<li v-for="n in evenNumbers">{{ n }}</li>
	  </ul>
	  <ul>
	  	<li v-for="n in even(numbers)">{{ n }}</li>
	  </ul>
	  <ul>
	  	<li v-for="num in numbers" v-if="num%2==0">
	  	  {{ num }}
	  	</li>
	  </ul>
	</div>
	<script type="text/javascript">
		var app4 = new Vue({
		  el: '#app-4',
		  data: {
		    numbers: [ 1, 2, 3, 4, 5 ]
		  },
		  computed: {
		    evenNumbers: function () {
		      return this.numbers.filter(function (number) {
		        return number % 2 === 0
		      })
		    }
		  },
		  methods: {
		    even: function (numbers) {
		      return numbers.filter(function (number) {
		        return number % 2 === 0
		      })
		    }
		  }
		})
	</script>
	
	<!-- v-for可以迭代一个整数,v-for可以通过template迭代渲染多个元素 -->
	<div id="app-5">
	  <div>
	    <span v-for="n in 10">{{ n }} </span>
	  </div>
	  <ul>
	    <template v-for="item in items">
	      <li>{{ item.msg }}</li>
	      <li class="divider" role="presentation"></li>
	    </template>
	  </ul>
	</div>
	<script type="text/javascript">

		var app5 = new Vue({
		  el: '#app-5',
		  data:{
		  	items:[{msg:'111'},{msg:'222'}]
		  }
		})
	</script>

	<!-- 自定义组件的v-for使用，自定义组件中使用v-for,任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要用props,如下 -->	
	<div id="app-6">
		<!-- 单纯这样写是得不到n的值的 -->
	  <abc v-for="n in 10">{{n}}</abc>
	  <!-- 要这样写，利用v-bind属性，并且在js中利用props属性 -->
	  <abc v-for="n in 10" v-bind:param=n v-bind:key=n></abc>
	</div>
	<script type="text/javascript">
		Vue.component('abc', {
		  template: '\
		    <li>\
		      {{ param }}\
		    </li>\
		  ',
		  props: ['param']
		})
		var app6 = new Vue({
		  el: '#app-6',
		  data: {
		  }
		})
	</script>

	
</body>
</html>













hurricane_li
关注
专栏目录
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 7073
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
Vue-计算属性-过滤器-侦听器
欢迎
06-06 248
目标: 当v-for遍历的目标结构改变, Vue触发v-for的更新口诀: 1.v-for就地更新: 的默认行为会尝试原地修改元素而不是移动它们。这种 虚拟DOM对比方式, 可以提高性能 - 但是还不够高概念:本质是保存dom关键信息的JS对象内存中生成一样的虚拟DOM结构(本质是个JS对象)，因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了，比如template里标签结构 对应的虚拟DOM结构 以后vue数据更新好处：v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v
数组去重、排序、扁平化 css居中 斐波那契数列 vue响应更新
qq_45435203的博客
10-16 216
css子元素在父元素水平垂直居中 <div class="wrapper"> <div class="child"> HELLO </div> </div> <style> /* 1. 第一种方法定位 */ html, body, .wrapper{ padding: 0; margin: 0; position: relative; w
vue过滤排序
李特成的博客
07-17 359
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;过滤/排序&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
关于v-for中，遍历序号/索引的使用
weixin_45629623的博客
02-03 3069
关于v-for中，遍历序号/索引的使用 是否有这种需求：如图把序号打印出来，或者根据这些序号做一些事情 比如：只输出前十个，剔除第几个… 直接上代码 v-for="(item, index) in items" v-if="index<10" (item, index) in items是为数组索引指定别名的写法。既然为数组索引，那必须是下标形式。那么下面就可以运用index。 1.如上...
Vue监测数据改变原理
嘤嘤鸭的博客
10-19 1408
Vue监测数据改变原理
【Vue】基础系列（五）列表渲染v-for | key的原理 | 数组 | 对象 | 删除替换 | 过滤与排序
YK菌的博客
01-18 3011
学习v-for列表渲染
Vue3中的模板指令——列表渲染指令v-for
最新发布
传播有益的技术文章，力求精准、专业、专心、专享
06-06 433
v-for指令相当于根据组件实例中的数组数据来批量渲染生成大量的新的数据标签
vue 根据if添加class_Vue基础知识-3 Class与Style绑定 条件渲染 列表渲染
weixin_39664585的博客
02-05 1584
Class与Style绑定一、绑定HTML Classv-bind 用于处理操作元素的class列表和内联样式1、对象语法(1)v-bind:class = "{ active: isActive }"(2)v-bind:class = "{ active: isActive, 'text-danger' :hasError }"class = "static"//可以和普通class共存上面...
vue数组对象排序的实现代码
12-29
前言 最近在看vue的教学视频，正好学到的数组对象排序方法，在这跟大家分享一下，如有不足之处，请赐教。 普通数组的排序 先看代码： v-for实例 {{number}} [removed] new Vue({ el:'.app', data:{ numbers:[5 ,88, 43, 56, 28, 61, 9], }, computed:{
vue变化检测机制
weixin_44164270的博客
03-07 958
vue根据状态自动进行渲染dom； vue 声明式 vue 对比react 和 angular(变化检测) 变化检测方式无非分成了两种(根据粒度的粗细可以划分) 1.拉，react 和 angular 就是拉对于可能的状态变化，数据变化就会通知框架，对于所有的组件进行暴力对比dom，采用虚拟dom进行暴力对比，找出需要渲染的dom节点，然后重新渲染； > 脏检查； 2.推 vue使用的 vue1.0 的时候是以dom节点的方式更新，当状态变化的时候会通知所有的依赖的dom节点，通知dom节点开始更新
vue 根据数组中某一项的值进行排序
weixin_34184158的博客
08-29 3670
一、前言 我在vue项目中遇到了一个表格排序的需求，根据某一项的值的大小从大到小调整数组顺序。 二、代码 表格大概是这个样子，样式和图片在代码中简化了。 <table class="recommend_table" cellspacing="0"> <tr> <th>股票&lt...
Vue中对获取的数据进行重新排序
weixin_30496751的博客
06-21 3241
var Enumerable = require('linq'); // 使用linq 按照RegisterID排序listJust是自己定义的数组，来接收数据。listJust: [] addData(data) { let that = this if (this.listJust.length && ...
过滤数据以及数组去重。2.0vue -- 飞机票项目
Facing_the_Giants的博客
10-31 3912
大家好！ 我是杨小宝，项目马上结束，下几篇提供数据交互，以及渲染的难点。这一篇讲解过滤数据以及数组去重。效果： 在项目中，我们会经常遇到 筛选 功能，那么 既然需要筛选，我们就要用到数组的去重，数据的整理，等等。先上一张图，我们的要的效果是什么？ 知识： created钩子函数 数组去重 数据“中转” 分析： 1.首先我们请求下的来
20180426-vue反选案例和数组去重
weixin_41614476的博客
04-26 1540
let flag = true;                                 //定义flag为全选 for(var i = 0; i &lt; List.length; i++){ //遍历数组 if(!List[i].selected){        //如果有一项不被选中     flag = false;  ...
数组元素为对象的数组如何去重
热爱思考、活力满满、开朗爱笑的年轻人
09-01 7869
在 JavaScript 中有一个数组，数组的元素是一个个的对象，我们想对它进行去重处理。 [ { age: 20, name: &amp;amp;quot;John&amp;amp;quot; }, { age: 31, name: &amp;amp;quot;Mary&amp;amp;quot; }, { age: 20, name: &amp;amp;quot;John&amp;amp;quot; } ] 关于如上数据，进行去重：
VUE 数组对象 和 数字排序
热门推荐
大啵鱼
07-05 1万+
普通数组的排序先看代码：&lt;div class="app"&gt; &lt;h1&gt;v-for实例&lt;/h1&gt; &lt;hr&gt; &lt;ol&gt; &lt;li v-for="number in numbers"&gt;{{number}}&lt;/li&gt; &
vue v-if 判定
xuelang532777032的博客
12-13 7542
在  vue的v-if 有个坑  很多人不小心会踩到   那就是  v-if里   undefined和   “”空 值 的 判定都是  false 而我们的js if(undefined)是  false    if("") 是 true的  所以 后面页面 v-if 判断为空 最好都用 v-if=‘变量!=undefined’ &lt;div v-if='test'&gt;1&lt;/...
Vue v-for循环点击元素动态添加样式与索引应用
在Vue.js中，v-for循环是一个强大的指令，用于根据数据列表渲染多个相同的元素。然而，有时我们希望在用户点击某个元素时，仅对该元素应用特定的样式，而其他元素保持原样。本文将详细介绍如何实现这种场景，特别是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值