演示条件渲染,计算属性与侦听器属性

条件渲染:v-if,v-show

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: {
          //计算属性默认getter
          amount: {
            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>
        <input
          type="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>

条件渲染:v-if,v-show

样式代码:

效果预览:

计算器属性:

样式代码:

效果预览:

侦听器属性:

样式代码:

效果预览:

相关文章