Vue.js-过滤器和侦听器
Posted guardwhy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js-过滤器和侦听器相关的知识，希望对你有一定的参考价值。
1.1 filter过滤器
1.1.1 什么是过滤器
过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
数据加工车间,对值进行筛选加工。
1.1.2 过滤器使用位置
双括号插值内
{{ msg | filterA }} msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道将数据传输给过滤器进行过滤。
v-bind绑定的值的地方
<h1 v-bind:id=" msg | filterA"> {{ msg }} </h1>
1.1.3 过滤器
局部过滤器
基本需求: 通过过滤器给电脑价格前面 添加一个符号$
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 使用插值表达式,调用过滤器 -->
<p>电脑价格: {{price | addPrice}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//局部过滤器 在vue实例的内部创建filter
const app = new Vue({
el: "#app", //挂载点
data: {
//model
price: 200,
},
//局部过滤器
filters: {
//定义处理函数 value = price
addPrice(value) {
return "$" + value;
},
},
});
</script>
</html>
执行结果
全局过滤器
基本需求: 将用户名开头字母大写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*
需求: 将用户名开头字母大写
总结:
1.过滤器经常被用来处理文本格式化操作
2.过滤器使用的两个位置: {{}} 插值表达式中, v-bind表达式中
3.过滤器是通过管道传输数据的 |
*/
</style>
</head>
<body>
<div id="app">
<p>{{user.name | changeName}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//在创建vue实例之前,创建全局过滤器
Vue.filter("changeName", function (value) {
//将姓名的开头字母大写
return value.charAt(0).toUpperCase() + value.slice(1);
});
const app = new Vue({
el: "#app",
data: {
user: { name: "guardwhy" },
},
});
</script>
</html>
执行结果
1.1.4 总结
过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。
过滤器应该被添加在 javascript 表达式的尾部，由“管道”符号指示。
2.1 watch侦听器
2.1.1 什么是侦听器
Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。
作用: 当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性。
2.1.2 代码示例
需求: 监听数字变化，实时显示！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>计数器:{{count}}</h2>
<input type="button" @click="count++" value="按钮" />
</div>
</body>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
count: 1,
},
watch: {
//监测属性的值的变化
count: (num2, num1) =>
//参数1:原来的值 参数2:新的值
alert("计数器发生变化: " + num1 + "变化为 " + num2)
},
});
</script>
</html>
执行结果
以上是关于Vue.js-过滤器和侦听器的主要内容，如果未能解决你的问题，请参考以下文章