二、vue学习之属性计算,监听器,过滤器

最新推荐文章于 2022-11-28 08:30:00 发布

一个名字很长很长很长的JAVA工程师

最新推荐文章于 2022-11-28 08:30:00 发布

阅读量141

点赞数

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

本文链接：https://blog.csdn.net/wzsy_ll/article/details/106095594

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js框架中如何使用计算属性来响应式地处理复杂逻辑，揭示了监听器如何捕获并响应数据变化，同时探讨了过滤器在数据格式化中的应用，为Vue项目的开发提供了实用技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2、vue属性计算,监听器,过滤器</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{cpCount|ftVal}}
			<hr>
			{{c}}
			<button @click="changeC">变更值</button>
		</div>
	</body>
	<script>
		/**
		 1、计算属性  在 computed 中定义方法  在方法中计算属性  属性变化后 会重新渲染视图
		 2、过滤器  局部过滤器 和 全局过滤器  (局部过滤器和全局过滤器 如果 名称一样的话 会使用 局部过滤器过滤值)
				------声明------
				局部过滤器在当前对象内部以 filters声明,作用域  : 只能在当前对象中使用
				filters:{
					过滤器名称:function(过滤器处理的值){
						return  处理后的值;
					}
				}
				全局过滤器 使用 Vue.filter 声明,作用域  : 在任何地方使用
				Vue.filter(过滤器名,function(过滤器处理的值){
					return  处理后的值;
				});
				------使用------
				需要过滤的值|过滤器名称
				
		 */
		//如果值大于1  显示 大于1  或 小于 等于1
		Vue.filter('ftVal',function(val){
			return val > 1 ? '大于1':'小于等于1';
		});
		new Vue({
			el:'#app',
			data(){
				return {
					a:1,
					b:2,
					c:666
				};
			},
			computed:{//计算属性
				cpCount:function(){ 
					return this.a + this.b;
				}
			},
			watch:{//监听属性
				c:function(nVal,oVal){
					console.log(nVal,oVal);
				}
			},
			filters:{//过滤器
				ftVal:function(val){
					return val > 2 ? '大于2':'小于等于2';
				}
			},
			methods:{
				changeC:function(){
					this.c = Math.random();
				}
			}
		});
	</script>
</html>