收藏
天蓬老师批改状态：合格
老师批语：
v-if: 元素是否添加到页面中v-show: 元素是否显示出来(元素已经在dom元素结构中)
<body><div id="app"><!-- 单分支 --><p v-if="flag">{{msg}}</p><button @click="flag = !flag" v-text="tips = flag ? `隐藏`: `显示`"></button><!-- 多分支 --><p v-if="point > 1000 && point < 2000">{{grade[0]}}</p><p v-else-if="point >= 2001 && point < 3000">{{grade[1]}}</p><p v-else-if="point >= 3001 && point < 4000">{{grade[2]}}</p><p v-else-if="point >= 4000 ">{{grade[3]}}</p><p v-else>{{grade[4]}}</p><!-- v-show --><p v-show="status">祝大家牛年吉祥如意</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const vm = new Vue({el: document.querySelector("#app"),data() {return {msg: "明天我请大家吃饭",flag: true,tips: "隐藏",point: 4000,grade: ["青铜会员","白银会员","黄金会员","白金会员","只对VIP开放",],status: true,};},});</script></body>
计算属性,本质上就是原生的访问器属性计算属性: 最终会和data合并,所以不要和data中已有属性重名访问器属性有getter/setter
<body><div class="app"><p>数量:<input type="number" v-model="num" style="width: 3em" min="0" /></p><p>单价: {{price}} 元</p><p>金额: {{amount}} 元</p></div><script>const vm = new Vue({el: document.querySelector(".app"),data() {return {num: 1,price: 50,res: 0,};},computed: {//计算属性默认getteramount: {get() {return this.num * this.price;},set(value) {console.log(value);if (value > 1000) this.price = 80;},},},});vm.amount = 1100;</script></body>
侦听器属性:监听数据对象的变化侦听器是某一个属性的值的变化,它的属性名与data中要监听的属性同名
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body><div class="app"><p><inputtype="number"v-model="num"style="width: 3em"min="0"max="max"/></p><p>单价:{{price}} 元</p><p>金额: {{res}} 元</p></div><script>const vm = new Vue({el: document.querySelector(".app"),data() {return {num: 0,price: 50,res: 0,max: 100,};},// 侦听器属性watch: {num(newValut, oldValue) {console.log(newValut, oldValue);// this.res = this.num * this.price;this.res = newValut * this.price;// 监听库存if (newValut >= 20) {this.max = newValut;alert("库存不足,请联系管理");}},},});</script></body>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
