Vue学习笔记之05-条件判断

v-if

• 指令的值可以是一个布尔值, 也可以是一个判断条件
• 用于决定一个标签元素是否在页面中渲染
• 如果值为真, 则指令的标签会加载在页面中, 为false则不会加载在页面中(不会存在)

<div id="app">
    <!-- v-if基本使用, 如果值为true则会加载该标签, 为false则不会加载该标签(这个标签不会存在) -->
    <h2 v-if="false">{{meassage}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        meassage: "你好你好"
      }
    })
  </script>

v-if 和 v-else

• 如果v-if的值为真则会加载 v-if的标签, 否则会加载v-else 的标签

<div id="app">
    <ul v-if="isShow">
      <li>你好</li>
      <li>你好</li>
      <li>你好</li>
      <li>你好</li>
    </ul>
    <div v-else>v-if为假的时候,显示的div</div>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        isShow: true
      }
    })
  </script>

v-if 和 v-else-if 和 v-else

• 如果有多种情况需要判断的的话, 可以用v-else-if 指令写更多的情况, 但是一般不会将判断的过程写在页面的标签指令中, 而是写在 computed 计算属性中, 这样代码更好看

<div id="app">
    <h2 v-if="scort>=90">优秀</h2>
    <h2 v-else-if="scort>=80">良好</h2>
    <h2 v-else-if="scort>=60">及格</h2>
    <h2 v-else>不及格</h2>
    <!-- 如果进行复杂的判断的话 不会像上面那样写 而是将判断条件写在computed中 -->
    <h1>{{result}}</h1>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        scort: 55,
      },
      computed: {
        result() {
          let showMeassage = "";
          if (this.scort >= 90) {
            showMeassage = "优秀";
          } else if (this.scort >= 80) {
            showMeassage = "良好";
          } else if (this.scort >= 60) {
            showMeassage = "及格";
          } else {
            showMeassage = "不及格"
          }
          return showMeassage;
        }
      }
    })
  </script>

v-show

• v-show是用来决定元素是否在dom中显示的, 如果值为false,则会在对应的元素加上行内样式, display=“none”
• 与v-if的区别是, v-if是用来决定元素是否在dom中渲染, 如果值为false, 那么对应的元素则不会被渲染出来
• 开发中, 如果元素在页面中的切换很频繁, 那么就使用v-show, 如果元素在页面中只切换一次的话就用v-if, 开发中v-if常用一点

<div id="app">
    <!-- v-if是用来决定元素是否在dom中渲染, 如果值为false, 那么对应的元素则不会被渲染出来 -->
    <h2 v-if="isShow">{{message}}</h2>
    <!-- v-show是用来决定元素是否在dom中显示的, 如果值为false,则会在对应的元素加上行内样式, display="none" -->
    <h2 v-show="isShow">{{message}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好呀",
        isShow: true
      }
    })
  </script>