条件渲染v-if v-show、计算属性和监听器

1.条件渲染

v-if 与 v-show
v-if：v-if 指令和原生 js 中的 if 语句的功能是一样的，作为条件约束，执行哪些功能。同样有作为单分支和多分支条件的语句。

      <!-- 单分支  -->
      <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：v-show 指令和 v-if 指令的功能差不多，区别最大的一点是使用 v-dom 的元素，在 dom 树加载完成之后就会存在，只是显示不显示的问题，而 v-if 语句则不一样，它是根据条件判断，然后再从 vue 中渲染到页面上。v-show 的用处是可以定时的显示一些准备好的东西。好处是比起 v-if 来说，v-show 是本来就存在的 dom 元素，页面不会进行多次的渲染刷新。
功能：v-show 是在 dom 元素创建之后就存在了，只是显示不显示的决定在你，你可以设置什么时候显示，这样在一些活动倒计时的情况中，就直接可以更换页面，而不显得突兀，也不需要页面刷新。

键盘修饰符

<script>
      const vm = new Vue({
        el: document.querySelector(".app"),
        data() {
          return {
            list: [],
          };
        },
        // 事件方法
        methods: {
          submit(ev) {
            // console.log(ev.key);
            //  console.log(ev.target.value);
            // if (ev.key === "Enter") {
            //   this.list.unshift(ev.target.value);
            //   ev.target.value = null;
            // }
            // 使用了键盘修饰符: enter
            this.list.unshift(ev.target.value);
            ev.target.value = null;
          },
        },
      });
    </script>

2.计算属性

计算属性使用 computed 声明，本质上就是访问器属性，最终会和 data 合并，所以不要和 data 中已有属性重名。

    <div class="app">
      <p>
        数量:
        <!-- <input
          type="number"
          v-model="num"
          style="width: 5em"
          min="0"
          @change="calc"
        /> -->
        <input type="number" v-model="num" style="width: 5em" min="0" />
      </p>
      <p>单价: {{price}} 元</p>
      <!-- <p>金额: {{num * price}} 元</p> -->
      <!-- <p>金额: {{res}} 元</p> -->
      <!-- <p>金额: {{res}} 元</p> -->
      <!-- 计算属性,本质上就是原生的访问器属性 -->
      <p>金额: {{amount}} 元</p>
    </div>
    <script>
      const vm = new Vue({
        el: document.querySelector(".app"),
        data() {
          return {
            num: 0,
            price: 50,
            res: 0,
          };
        },
        // 计算属性: 最终会和data合并,所以不要和data中已有属性重名
        // 使用computed声明
        computed: {
          //   amount() {
          //     return this.num * this.price;
          //   },
          //   访问器属性有getter/setter
          // 计算属性默认是getter
          amount: {
            get() {
              return this.num * this.price;
            },
            set(value) {
              console.log(value);
              if (value > 1000) this.price = 40;
            },
          },
        },
      });
      vm.amount = 1001;
    </script>

侦听器
侦听器属性使用 watch 声明,它侦听的是某一个属性的值的变化，它的属性名与 data 中要监听的属性同名。侦听器属性更加注重的是实时性，但是它没有计算属性灵活.

1.条件渲染

键盘修饰符

2.计算属性

更多相关文章

随机推荐