vue之filter与watch

最新推荐文章于 2024-07-04 10:07:27 发布

懒人修

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量738

点赞数

分类专栏： vue 文章标签： vue之filter与watch

本文链接：https://blog.csdn.net/weixin_44268707/article/details/88701171

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

filter 过滤器

  在实例内部可以通过filters定义一个过滤器
  过滤器可以对输入的数据进行过滤显示,
  多个过滤器可以拼接, 拼接的时候多个过滤器用 | 进行分割,分割的值依次在前者基础上进行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>watch</title>
</head>
<body>
  <div id="app">
    <p>加一个后缀:<span>{{txt | dalPrice | dalPriceSecond}}</span></p>
    <input type="number" v-model="txt">
  </div>
  <script src="./lib/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        txt: '',
      },
      // computed: {
      //   txtPrice() {
      //     if (this.txt) {
      //       return `￥${this.txt}元`
      //     } else {
      //       return ''
      //     }
      //   }
      // }
      filters: {
        dalPrice(val) {
          console.log(val)
          return `￥${val}元`
        },
        dalPriceSecond(v) {
          console.log(v);
          return '花不完的钱' + v
        }
      }
    })
  </script>
</body>
</html>

watch

watch 监听观察数据的改变, 当数据改变之后会触发回调函数
用在路由地址改变的时候获取参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>watch</title>
</head>
<body>
  <div id="app">
    <p>反转之后的内容为: <span>{{reverseTxt}}</span></p>
    <input type="text" v-model="txt">
    <hr>
    <p>全名为: {{fullName}}</p>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
  </div>
  <script src="./lib/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        txt: '',
        firstName: '',
        lastName: '',
        reverseTxt: '',
        fullName: ''
      },
      watch: {
        firstName: function() {
          console.log('first name changed');
          this.fullName = `${this.firstName} ${this.lastName}`;
        },
        lastName: () => {
          console.log('last name changed');
          console.log(this);
          app.fullName = `${app.firstName} ${app.lastName}`;
        },
        txt() {
          console.log('txt changed');
          this.reverseTxt = this.txt.split('').reverse().join('');
        }
      }
    })
  </script>
</body>
</html>