五、伊森商城前端基础-Vue 计算属性和侦听器 & 过滤器 & 组件化 & 生命周期钩子函数 p25

1、计算属性和侦听器

1.1、计算属性（computed）

1.2、侦听器

2、过滤器（filters）

3、组件化

4、生命周期钩子函数

1、计算属性和侦听器

1.1、计算属性（computed）

某些结果是基于之前数据实时计算出来的，我们可以利用计算属性来完成。

只要依赖的属性发生变化，就会重新计算这个属性


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>Documenttitle>
head>
 
<body>
    <div id="app">
        
        <ul>
            <li>西游记； 价格：{
  {xyjPrice}}，数量：<input type="number" v-model="xyjNum"> li>
            <li>水浒传； 价格：{
  {shzPrice}}，数量：<input type="number" v-model="shzNum"> li> 
            <li>总价：{
  {totalPrice}}li>
            {
  {msg}}
        ul>
    div>
    <script src="../node_modules/vue/dist/vue.js">script>
 
    <script>
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            // computed代表计算属性，所有需要动态计算的，都写在这
            computed: {
                // 计算总价
                totalPrice(){
                    return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
                }
            },
 
 
        })
    script>
 
body>
 
html>

1.2、侦听器

watch 可以让我们监控一个值的变化。从而做出相应的反应。


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">

相关阅读:
图的拉普拉斯矩阵
pycharm安装第三方库
（二）、构造函数和原型
vscode运行Java utf-8文件中文乱码报错
代码随想录动态规划Ⅳ
SAP MRP中的滚动提前期简介（MRP自动删除已固定计划订单）
PageHelper基础知识
Trajectory planning for multi-robot systems: Methods and applications 综述阅读笔记
MIT6.s081/6.828 lectrue05/06：System call entry/exit 以及 Lab4 心得
Kali-linux攻击路由器

原文地址：https://blog.csdn.net/weixin_56220914/article/details/128193510

五、伊森商城 前端基础-Vue 计算属性和侦听器 & 过滤器 & 组件化 & 生命周期钩子函数 p25

1、计算属性和侦听器

1.1、计算属性（computed）

1.2、 侦听器

五、伊森商城前端基础-Vue 计算属性和侦听器 & 过滤器 & 组件化 & 生命周期钩子函数 p25

1.2、侦听器