侦听器-过滤器--计算属性_{{price|filter}}-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_69507480/article/details/125194321

侦听器

Vue中提供了一种特定功能，可以监听一个受控制的变量（data选项中声明的变量）内部的数据是否发生更新，一旦发生更新就**可以被监听（自动执行）**并执行一些后续的操作！

基本语法：

const app = new Vue({
    ....
    watch: {
    	被监听的变量: function(oldVal, newVal) {
    		当变量中的数据一旦发生改变，自动执行的函数
		}
	}
})

代码操作：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>普通变量：{{ message }}</p>
    <p>对象数据：{{ loginForm.username }}</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "变量数据",
        loginForm: {
          username: 'damu'
        }
      },
      watch: {
        // 普通变量，简介语法声明的监听器
        message: (newVal, oldVal) => {
          console.log(newVal, oldVal,  "监听器生效")
        },
        // 对象数据，完整语法，声明的深度监听器
        loginForm: {
          handler(newVal, oldVal){
            console.log(newVal.username, oldVal.username, "对象监听器生效")
          },
          deep: true  // 开启深度监听，可以监听对象内部的数据是否发生变化
        }
      }
    })
  </script>
</body>
</html>

计算属性

Vue中结合项目中需要频繁运算的处理逻辑，封装了一个可以执行自动运算的实例选项，称为计算属性；可以监听参与运算的变量数据是否发生更新，如果没有发生改变直接返回上一次运算的结果；如果发生改变自动运算并返回结果

基本语法

const app = new Vue({
    el: "#app",
    ....
    computed: {
    	计算属性名称: 函数() {
    		自动运算并返回结果
		}
	}
})

代码操作：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>商品单价： {{ price }}</p>
    <p>购买数量：<input type="number" v-model="count"/></p>
    <p>小计金额：{{ price * count }}元</p>
    <p>计算属性：{{ subtotal }}元</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        price: 699,
        count: 1
      },
      computed: {
        // 内部函数包含自己的作用域，包含自己的this关键词
        // 如果修改为箭头函数，就会丢失this指向
        subtotal: function () {
          return this.price * this.count
        }
      }
    })
  </script>
</body>
</html>

过滤器

Vue框架针对页面上展示的数据，数据格式可以通过固定的函数进行规范；对展示数据进行格式规范的选项称为过滤器（filter）

基本语法：

// 全局过滤器：一旦声明，所有的Vue实例中都可以使用
Vue.filter('过滤器名称', function(val) { 格式处理函数 })

// 局部/私有过滤器：一旦声明，只在当前Vue实例中可以使用
new Vue({
    ...
    filters: {
        '过滤器名称': function(val) {
            格式处理函数
        }
    }
})

代码操作：

<!DOCTYPE html>
<html lang='zh'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
</head>
<body>
  <div id='app'>
    <p>商品单价：{{ price }}</p>
    <p>商品单价（全局过滤器）：{{ price | priceFilter }}</p>
    <p>商品单价（私有过滤器）：{{ price | pfilter }}</p>
  </div>

  <script src='./vue.js'></script>
  <script>
    // 声明一个全局过滤器
    Vue.filter('priceFilter', function(val) {
      return parseFloat(val).toFixed(2) + "元"
    })
    const app = new Vue({
      el: '#app',
      data: {
        price: 699
      },
      watch: {},
      computed: {},
      methods: {},
      filters: {
        pfilter: function(val) { // 局部/私有过滤器，只能在当前实例范围使用
          return "￥" + parseFloat(val).toFixed(3) + "元"
        }
      }
    })
  </script>
  
</body>
</html>