计算属性和监听器


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>

相关阅读:
Comparator之用最少数量的箭引爆气球
Vue实现无限滚动加载更多内容（懒加载）或实现查看更多按钮
Redis缓存的雪崩、穿透、击穿
doT.js模板学习笔记
（附源码）python办公数据分析系统毕业设计 021836
LINQ to SQL语句(24)之视图
微信小程序的养发护发馆客户管理系统
操作系统初识
认识网线上的各种参数标号
一文说清楚！工作述职报告怎么写？

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