条件渲染

v-if：元素知否添加到页面中
为true时添加，为false时不添加

<p v-if='flag'>{{msg}}</p>
<script>
  const vm = new Vue({
      el: '#app',
      data() {
          return {
              msg: "晚上好",
              flag: true,
          }
      }
  })
</script>

点击显示与不显示小案例

<p v-if='flag'>{{msg}}</p>
<button @click="flag=!flag" v-text="tips=flag?`隐藏`:`显示`"></button>
<script>
  const vm = new Vue({
      el: '#app',
      data() {
          return {
              msg: "晚上好",
              flag: true,
              tips: '隐藏',
          }
      }
  })
</script>

多分支条件

v-if v-else-if v-else

<p v-if="score > 100 && score < 2000">{{level[0]}}</p>
<p v-else-if="score >= 2001 && score < 3000">{{level[1]}}</p>
<p v-else-if="score >= 3001 && score < 4000">{{level[2]}}</p>
<p v-else>{{level[3]}}</p>
<script>
  const vm = new Vue({
      el: '#app',
      data() {
          return {
              msg: "晚上好",
              flag: true,
              tips: '隐藏',
              score: 10000,
              level: ["铜牌", "银牌", "金牌", "王牌"],
          }
      }
  })
</script>

v-show:元素是否显示出来（元素已经在dom中存在）

<p v-show='status'>这是v-show</p>
<script>
const vm = new Vue({
    el: '#app',
    data() {
        return {
           status: true, 
        }
    }
})
</script>

计算属性

计算属性，本质上就是原生的访问属性
计算属性最终会和data合并，所以不要和data中已有属性重名

<div id="app">
    <p>数量: <input type="number" v-model='num' min="0"></p>
    <p>单价:{{price}}元</p>
    <p>金额:{{amout}}元</p>
</div>
<script>
const vm = new Vue({
    el: '#app',
    data() {
        return {
            num: 0,
            price: 50,
            res: 0
        }
    },
    computed: {
        amout: {
            get() {
                return this.num * this.price
            },
            set(value) {
                console.log(value);
                if (value > 1000) {
                    this.price = 40
                }
            }
        }
    }
})
vm.amout = 1001;
</script>

侦听器属性 watch

侦听的是某一个属性的值的变化，它的属性名与data中要监听的属性同名

<div id="app">
    <p>数量: <input type="number" v-model='num' min="0" :max='max'></p>
    <p>单价:{{price}}元</p>
    <p>金额:{{res}}元</p>
</div>
<script>
const vm = new Vue({
    el: '#app',
    data() {
        return {
            num: 0,
            price: 50,
            res: 0,
            max: 100,
        }
    },
    watch: {
        num(newValue, oldValue) {
            console.log("new:" + newValue, 'old' + oldValue);
            // this.res = this.num * this.price
            this.res = newValue * this.price;
            //监听库存
            if (newValue >= 20) {
                this.max = newValue;
                alert('库存不足');
            }
        }
    }
})
</script>

条件渲染，计算属性和侦听器

条件渲染

点击显示与不显示小案例

多分支条件

计算属性

侦听器属性 watch

更多相关文章

随机推荐

条件渲染， 计算属性和侦听器

条件渲染

点击显示与不显示小案例

多分支条件

计算属性

侦听器属性 watch

更多相关文章

随机推荐

条件渲染，计算属性和侦听器