五、伊森商城前端基础-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">

相关阅读:
BS 476-4 建筑材料不燃性检测
数据分析与可视化 Numpy数组
【Java 基础篇】Java类型通配符：解密泛型的神秘面纱
redis安装及集群搭建
刷题##day4
python 背包问题：0-1背包，多重背包，数据结构，超详细模板套用和解读；数组组合问题
Lua-http库写一个爬虫程序怎么样？
(王道408考研操作系统)第二章进程管理-第二节2、3：进程调度的时机、切换与过程、方式、调度器和闲逛进程
孙卫琴的《精通Vue.js》读书笔记-命名路由
git 提交代码，解决分支冲突，合并分支

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

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

1、计算属性和侦听器

1.1、计算属性（computed）

1.2、 侦听器

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

1.2、侦听器