计算属性和监听器


html>
<html lang="en">
<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>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>
        ul>
    div>
    <script src="/../node_modules/vue/dist/vue.js">script>
    <script>
        new Vue({
            el:"#app",
            data:{
                xyjPrice:99.99,
                shzPrice:88.9,
                xyjNum:1,
                shzNum:2
            },
            // 计算属性：
            computed:{
                totalPrice(){
                    return this.xyjNum*this.xyjPrice+this.shzNum*this.shzPrice
                }
            },
            // 监听器
            watch:{
                xyjNum:function(newVal,oldVal){
                    // alert("newVal:"+newVal+"  "+"oldVal:"+oldVal)
                    if(newVal>=3){
                        this.msg="库存超出限制";
                        this.xyjNum=3
                    }
                    else{
                        this.msg="";
                    }
                }
            }
        })
    script>
body>
html>

相关阅读:
Linux命令记载
【NLP】特征提取: 广泛指南和 3 个操作教程 [Python、CNN、BERT]
MySQL MHA高可用配置及故障切换
linux 下安装 Nginx 以及开启文件下载目录配置web路径
kubernetes
数据结构 - 数组
Andorid复习
十四、使用 Vue Router 开发单页应用（3）
【算法题】工号不够用了怎么办？
刷题笔记（十九）--二叉树：二叉搜索树的修改与构造

原文地址：https://blog.csdn.net/qq_55278081/article/details/126366480