vue的过滤器和监听器

最新推荐文章于 2022-11-21 11:16:57 发布

kangswx

最新推荐文章于 2022-11-21 11:16:57 发布

阅读量274

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/kangswx/article/details/103229002

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue的过滤器的作用是对数据进行处理后再展示
过滤器有全局过滤器和组件内过滤器
- 全局过滤器：Vue.filter(‘过滤器名’, 过滤方式fn);
- 组件内过滤器filters:{‘过滤器名’, 过滤方式fn}；
- {{ msg | 过滤器名}}
最终都是在过滤方式fn里面return产出最终需要的结果

过滤器的使用方式–组件内过滤器

<!DOCTYPE html>
<html>
<head>
	<title>filter指令</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="app">
		<input type="text" name="" v-model="instring"><br>
		输入的内容： {{ instring }} <br>
		翻转的内容： {{ instring | reverseStr1()}}<br>
		{{ instring | reverseStr2('翻转的内容： ')}}
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data: function(){
				return {
					instring: ''
				}
			},
			filters: {
				reverseStr1(str){
					return str.split('').reverse().join('');
				},
				reverseStr2(str, param){
					return param + str.split('').reverse().join('');
				}
			}
		})
	</script>
</body>
</html>

过滤器的使用方式–全局过滤器

<!DOCTYPE html>
<html>
<head>
	<title>filter指令--全局过滤器</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="app">
		<input type="text" name="" v-model="instring"><br>
		输入的内容： {{ instring }} <br>
		翻转的内容： {{ instring | reverseStr1()}}<br>
		{{ instring | reverseStr2('翻转的内容： ')}}
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		Vue.filter('reverseStr1', function(str){
			return str.split('').reverse().join('');
		})
		Vue.filter('reverseStr2', function(str, param){
			return param + str.split('').reverse().join('');
		})

		new Vue({
			el:'#app',
			data: function(){
				return {
					instring: ''
				}
			}
		})
	</script>
</body>
</html>

数据监听watch(监听单个)

watch使用示例

<!DOCTYPE html>
<html>
<head>
	<title>watch指令</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="app">
		<div>watch</div>
		<input type="text" name="" v-model='msg'>
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data: function(){
				return {
					msg:''
				}
			},
			watch:{
				msg(newval, oldval){
					//console.log(newval, oldval);
					if('love' == newval){
						alert(newval);
					}
				}
			}
			
		})
	</script>
</body>
</html>

watch深度监听(监听一个对象(或数组)中属性的变化)

<!DOCTYPE html>
<html>
<head>
	<title>watch-deep指令</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="app">
		<div>watch</div>
		<input type="text" name="" v-model='msg.text'>
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data: function(){
				return {
					msg:{text:''}
				}
			},
			watch:{
				msg:{
					handler(newval, oldval){
						if('love' == newval.text){
							alert(newval.text);
						}
					},
					deep:true //开启深度监听
				}
			}
			
		})
	</script>
</body>
</html>

计算属性computed(监听多个)

computed的使用示例

<!DOCTYPE html>
<html>
<head>
	<title>computed指令</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="app">
		<div>computed</div>
		(<input type="text" name="" v-model='n1'> +
		<input type="text" name="" v-model='n2'>) *
		<input type="text" name="" v-model='n3'> = {{ result }}
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data: function(){
				return {
					n1: '',
					n2: '',
					n3: '1'
				}
			},
			computed: {
				result(){
					return (Number(this.n1) + Number(this.n2)) * Number(this.n3);
				}
			}
		})
	</script>
</body>
</html>