Vue总结2

最新推荐文章于 2024-11-08 16:09:18 发布

砖厂打工仔

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量66

点赞数

文章标签：过滤器 vue javascript

本文链接：https://blog.csdn.net/weixin_42456748/article/details/108822167

版权

Vue总结2

一、Vue常用特性

1.1 计算属性computed

模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以让模板更加的简洁。
计算属性是基于它们的响应式依赖进行缓存的。
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

代码演示：

<div id="app">
	<div id="">{{msg}}</div>
	<div id="">{{reverseStr}}</div>
	<div id="">{{reverseMsg()}}</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		data: {
			msg: "Hello"
		},
		methods: {
			reverseMsg() {
				//console.log('methods');
				return this.msg.split('').reverse().join('');
			}
		},
		computed: {
			reverseStr() {
				//console.log('computed');
				return this.msg.split('').reverse().join('');
			}
		}
	})
</script>

1.2 侦听器watch

使用watch来响应数据的变化。
一般用于异步或者开销较大的操作。
watch 中的属性一定是data中已经存在的数据。

代码演示：

案例：单位转换

<div id="box" align="center">
	千米：<input type="text" name="" id="" value="" v-model="kilometers" />
	米：<input type="text" name="" id="" value="" v-model="meters" />
</div>
<script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	new Vue({
		el: '#box',
		data: {
			msg: "hello world!",
			kilometers: '',
			meters: ''
		
		},
		watch: {
			kilometers: function(value) {
				this.kilometers = value;
				this.meters = value * 1000;
		
			},
			meters: function(value) {
				this.kilometers = value / 1000;
				this.meters = value;
			}
		}
	});
</script>

1.3 过滤器filters

过滤器可以用在两个地方：双花括号插值和v-bind表达式。
Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示

代码演示：

<div id="app">
	<input type="text" name="" id="" value="" v-model="msg"/>
	<div id="">{{msg | upper}}</div>
	<div id="">{{msg | upper | lower}}</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	Vue.filter('upper',function(val){
		return val.charAt(0).toUpperCase()+val.slice(1);
	});
	Vue.filter('lower',function(val){
		return val.charAt(0).toLowerCase()+val.slice(1);
	});
	var app = new Vue({
		el: "#app",
		data: {
			msg:''
		},
	})
</script>

过滤器中传递参数

案例：使用过滤器格式化日期。

<div id="app">
	<div id="">{{date | format('yyyy-MM-dd')}}</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	Vue.filter('format', function(value, arg) {
		if (arg == 'yyyy-MM-dd') {
			var ret = '';
			ret = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
		}
		return ret;
	})
	var app = new Vue({
		el: "#app",
		data: {
			date: new Date()
		}
	})
</script>