V-if -----------笔记

最新推荐文章于 2022-10-19 09:08:54 发布

最后一个字符串

最新推荐文章于 2022-10-19 09:08:54 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/m0_47236916/article/details/105910110

版权

v-if

v-if、v-else-if、v-else
这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
简单的案例演示：
在这里插入图片描述

当逻辑判断比较复杂，或者这个写法

<div id="app">
  <h1>{{result}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 80
    },
    computed: {
      result() {
        let showMessage = '';
        if (this.score >= 90) {
          showMessage = '优秀'
        } else if (this.score >= 80) {
          showMessage = '良好'
        }
        // ...
        return showMessage
      }
    }
  })
</script>