学习Vue的第三天

最新推荐文章于 2020-07-03 22:14:06 发布

碌碌无为的勤劳家

最新推荐文章于 2020-07-03 22:14:06 发布

阅读量185

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/wildwofe/article/details/106588261

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

计算属性和列表的渲染

在列表渲染过程中，可能要求满足特定条件的记录。

比如：我们只要显示商品价格大于6000的商品，这时候我们就可以用计算属性去过滤满足条件的数据并返回一个新的数。数组过滤方法（filter）。

正常情况下，当我们改变data中数据的时候，页面会实时修改并显示。但是对于数组而言，一些操作并不会实时响应，所以我们会用到一些数组变异的方法（我们熟知的操作数组的方法）。

当通过下标去修改对应下标的所有数据时，页面不会进行实时响应，如：vm.goodsList[0]
但是如果是通过下标去修改其对应那组数据的部分信息时，页面会实时响应，如：vm.goodsList[0].name

那么，如何解决不能实现实时响应这件事请（用到了我们所说的数组变异方法）

该方法用来修改指定下标的数组元素

Vue.set(vm.goodsList, 0, {name: ‘mac’, price: ‘9999’})
vm.$set(vm.goodsList, 0, {name: ‘mac’, price: ‘9999’})
第一个参数：要修改的数组
第二个参数：数组下标
第三个参数：修改后的数据

<body>
		<div id="app">
			<h4>价格大于6000的商品</h4>
			<ul>
				<!-- <li v-for="good in filterGoodList">{{good.name}}---{{good.price}}</li> -->
				<li v-for="good in goodsList" v-if="good.price > 6000">{{good.name}}---{{good.price}}</li>
			</ul>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var data ={
				goodsList:[
						{name:'iphone',price:'8888'},
						{name:'mp3',price:'888'},
						{name:'vedio',price:'88'},
						{name:'TV',price:'7777'}
					]
				}
		var vm = new Vue({
			el:'#app',
			data:data,
			computed:{
				filterGoodList:function(){
					//filter是一个数组方法 需要接受一个回调函数
					return this.goodsList.filter(function(good){
						//在回调函数中 good参数表示任意数组元素
						return good.price>6000;
					})
				}
			}
		})
	</script>

输出结果：
在这里插入图片描述

常用的数组方法

push() 在数组末尾添加元素
pop() 删除数组末尾元素
unshift() 在数组开头添加元素
shift() 删除数组开头元素
sort() 给数组排序

	// a-b是升序排列   b-a是降序排列
	sort(function(a, b) {
		return a.属性 - b.属性；
	})

reserve() 数组数据反转
splice() 添加、删除或修改数组中的多个元素

splice(startIndex, deleteCount, item1, item[, ...])  第一个参数之后的参数是可选的
	第一个参数：开始的索引	
	第二个参数：删除个数	
	第三个参数：添加的元素
spice(1) 从索引为1的元素开始，将后面的所有元素都删除，包括索引1对应的元素
splice(2,2)	从索引为2的元素开始，删除索引为2、3的两个元素
splice(2,1,itme1,item2)	从索引为2的元素开始，先删除一个元素，再从索引为2的位置开始
依次添加item1和item2元素

v-if指令

之前学过的指令有：

v-html 标签渲染
v-bind 属性渲染
v-for 列表渲染

现在我们要学的是：

v-if 条件渲染

使用方式其实跟JavaScript没太大区别，相当于JavaScript中的if语句。
同样也有三种形式：

v-if
v-if v-else
v-if v-else-if v-else

	<body>
		<div id="app">
			<h4>判断是否处于登录状态</h4>
			<div v-if="isLogin">
				欢迎登录
				<p v-if="type=='A'">A级用户</p>
				<p v-else-if="type=='B'">B级用户</p>
				<p v-else>C级用户</p>
			</div>
			<div v-else>还未登录，<a href="#">请登录</a></div>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				isLogin: true,
				type: 'C'
			}
		});
	</script>

输出结果：
在这里插入图片描述

v-if和v-for的联合使用

在编程中，我么更多会使用v-for和v-if的联合使用，当它们作用于同一标签时，v-for的级别比v-if更高，也就是说v-if要重复运行于每一个v-for运行之后。

	<body>
		<div id="app">
			<ul>
				<li v-for="good in goodsList" v-if="good.price>6000">
					{{good.name}} -- {{good.price}}
				</li>
			</ul>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var data = {
			goodsList:[
				{name: 'iphone',price: '8888'},
				{name: 'vivo',price: '888'},
				{name: 'honor',price: '6666'},
				{name: 'oppo',price: '5999'}
			]
		};
		var vm = new Vue({
			el: '#app',
			data: data
		});
	</script>

输出结果：
在这里插入图片描述

v-if和v-for的优先级

当v-for和v-if作用于同一标签时，v-for的优先级就比v-if高，要想让v-if的优先级高于v-for， v-if就要写在父标签中。

	<body>
		<div id="app">
			<ul v-if="types.n==2">
				<li v-for="good in goods" v-if="good.n==types.n">{{good}}</li>
			</ul>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var data = {
			types:{
				n:2
			},
			goods:[
				{name:'hehe1',n:1},
				{name:'hehe3',n:3},
				{name:'hehe2',n:2},
				{name:'hehe1',n:1},
				{name:'hehe1',n:1},
				{name:'hehe2',n:2},
				{name:'hehe1',n:1},
				{name:'hehe2',n:2},
				{name:'hehe2',n:2},
				{name:'hehe3',n:3},
				{name:'hehe3',n:3},
				{name:'hehe1',n:1},
				{name:'hehe3',n:3},
				{name:'hehe3',n:3},
				{name:'hehe3',n:3}
			]
		}
		var vm = new Vue({
			el:"#app",
			data:data
		})
	</script>

输出结果：
在这里插入图片描述

v-if和v-for的练习

要求：将goods数组中的元素按照n属性分类，然后只取每一类的前四个元素，渲染在页面上。

	<body>
		<div id="app">
			<ul v-for="type in types">
				<liv-for="(good,index) in filterGood(goods,type)" v-if="index<4">{{good}}</li>
			</ul>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var data = {
			types:[
				{n:1},
				{n:2},
				{n:3}
			],
			goods:[
				{name:'hehe1',n:1},
				{name:'hehe3',n:3},
				{name:'hehe2',n:2},
				{name:'hehe1',n:1},
				{name:'hehe1',n:1},
				{name:'hehe2',n:2},
				{name:'hehe1',n:1},
				{name:'hehe2',n:2},
				{name:'hehe2',n:2},
				{name:'hehe3',n:3},
				{name:'hehe3',n:3},
				{name:'hehe1',n:1},
				{name:'hehe3',n:3},
				{name:'hehe3',n:3},
				{name:'hehe3',n:3}
			]
		}
		var vm = new Vue({
			el:"#app",
			data:data,
			methods:{
				filterGood:function(goods,type) {
					// 当参数type是1时，filterGood就是装type为1的元素的数组
					// 当参数type是2时，filterGood就是装type为2的元素的新数组
					// 当参数type是3时，filterGood就是装type为3的元素的新数组
					return goods.filter(function(good) {
						return good.n == type.n;
					});
				}
			}
		})
	</script>

输出结果：
在这里插入图片描述

v-show指令

v-show指令根据条件的不同，决定是否显示渲染元素

v-if和v-show的区别：

v-if是决定是否渲染元素(当不渲染该元素时该元素是不存在的)
v-show决定是否显示渲染元素 (这个元素是存在的只不过是修改了display的值)

	<body>
		<div id="app">
			<h4>v-show</h4>
			<p v-show="isLogin">v-show内容</p>
			<h4>v-if</h4>		
			<p v-if="isLogin">v-if内容</p>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				isLogin:false
			}
		})
	</script>

输出结果：
在这里插入图片描述

事件处理

我们可以直接将事件处理所做的事情直接写在双引号中，同样我们也可以去调用一个自定义函数，此自定义函数写在methods中。

事件处理需要绑定事件处理函数，在vue中绑定事件处理函数，直接在HTML中使用v-on
指令即可。

语法格式：
v-on:事件名=”事件处理代码”
也可以写成 v-on:事件名=”事件处理函数”
或者是 v-on:事件名=”事件处理函数()”

事件名前面的v-on:可以用@替代

在我们的事件处理中，无非就是两大类：鼠标监听、键盘监听

	<body>
		<div id="app">
			<button v-on:click="counter += 1">加一</button>
			<button v-on:click="counter -= 1">减一</button>
			
			<!-- 事件处理函数 -->
			<!-- <button @click="jisuan">调用methods中的函数</button> -->
			<!-- 内联处理器中的函数(函数的调用) -->
			<button v-on:click="jisuan()">调用methods中的函数</button>
			
			<p>counter == {{counter}}</p>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				counter:0
			},
			methods:{
				jisuan:function(){
					this.counter = this.counter*2/4;
				}
			}
		})
	</script>

输出结果：
在这里插入图片描述

碌碌无为的勤劳家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习Vue的第三天

计算属性和列表的渲染在列表渲染过程中，可能要求满足特定条件的记录。比如：我们只要显示商品价格大于6000的商品，这时候我们就可以用计算属性去过滤满足条件的数据并返回一个新的数。数组过滤方法（filter）。正常情况下，当我们改变data中数据的时候，页面会实时修改并显示。但是对于数组而言，一些操作并不会实时响应，所以我们会用到一些数组变异的方法（我们熟知的操作数组的方法）。当通过下标去修改对应下标的所有数据时，页面不会进行实时响应，如：vm.goodsList[0]但是如果是通过下标去修改其
复制链接

扫一扫