vue-2计算属性与侦听器

最新推荐文章于 2024-04-22 10:59:28 发布

九八年的尾巴

最新推荐文章于 2024-04-22 10:59:28 发布

阅读量164

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/q736317048/article/details/106340471

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

计算属性

在这里插入图片描述

侦听器

监听一个值，当我们的值发生变化时去处理

				watch:{//控制台打印检测值变化
					v1:function(newV,oldV){
						console.log("开始变化"+newV)
						console.log("老的变化"+oldV)
					}
				}

绑定HTML CSS

<h1 :class="{c1:isC1}">绑定Class的值</h1>
var app = new Vue({
	data:{isc1:true}//如果为true改变颜色
})

数据里绑定属性值通过button按钮更改属性值
在这里插入图片描述

绑定内联样式

在这里插入图片描述

绑定对象可以写多个样式

在这里插入图片描述

在< template>元素上使用 v-if 条件渲染分组

			<h1 v-if="show">
				这里是if
			</h1>
			<h1 v-else>
				这里是else
			</h1>
			data:{show:true} 可通过控制台app.show=false 变成else

v-else-if

			<h1 v-if="a == 'a'">
				A
			</h1>
			<h1 v-else-if="a == 'b'">
				B
			</h1>
			<h1 v-else>
				C
			</h1>
			data:{a:"a"}  通过控制台app.a="v" 变成C app.a="b" 变成B 和java判断语句一样

v-show 作用和v-if差不多主要是显示元素

主要切换与display 不支持v-if和template

if会保证我们的事件监听和修改 show不会，需要涉及到css的区别各有各区别

			<h1 v-show="show">
				这里是v-show
			</h1> 当我们的切换较多用v-if 切换较多用v-show 通知台app.show=false 不显示

v-for

index:当前信息索引

			<!--v-for 遍历取出数组   item当前遍历对象的别名 index索引-->
			<p v-for="(item,index) in list">
				{{index}} - {{item.value}}
			</p>
			<hr/>
			<!--遍历对象-->
			<p v-for="item in obj">
				{{item}}
			</p>

					data{
					list:[
					//创建集合
						{value:"消息1"},
						{value:"消息2"},
						{value:"消息3"}
					],
					obj:{
						name:"名称",
						sex:"性别"
					}
					}

写取列名

			<!--写取列名 遍历对象-->
			<p v-for="(item,name,index) in obj">
				{{index}} - {{name}} - {{item}}
			</p>

显示过滤/排序后的结果

//遍历计算属性 以及对集合进行筛选操作
	<body>
			<p v-for="item in filterList">
				{{item.value}}
			</p>
	</body>
			data:{
					list:[
						{name:"a",value:"消息1"},
						{name:"a",value:"消息2"},
						{name:"b",value:"消息3"}
					]
				},
		computed:{
					filterList:function(){
						return this.list.filter(
							function(v){
								if(v.name == "a"){
									//如果name值等于a返回
									return v
								}
							}
						)
					}
				}