VUE 条件指令语法

╰+哭是因爲堅強的太久メ 2022-04-22 15:42 320阅读 0赞

v-if v-else v-else-if

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Hello Vue</title>
  6. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <h1 v-if="isok">IsOK=true</h1>
  12.         <h1 v-else>IsOK=false</h1>
  14.         <h3 v-if="code === 'A'">Code is A</h3>
  15.         <h3 v-else-if="code === 'B'">Code is B</h3>
  16.         <h3 v-else-if="code === 'C'">Code is C</h3>
  17.         <h3 v-else>Not ABC</h3>
  18.     </div>
  19. <script>
  21. var obj = {
  22.     isok:true,
  23.     code:'A'
  24. }
  25. var vm = new Vue({
  26.   el: '#app',
  27.   data: obj
  28. })
  29. </script>
  30. </body>
  31. </html>

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，320人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue的条件渲染指令

    与JS的条件语句类似，Vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素/组件 v-else-if要紧跟v-if，v-else要紧跟v-else-if或者v--if

    小灰灰小灰灰/ 0 赞/ 19 阅读

    相关 Vue指令语法

     除了插值语法(解析标签体的内容)之外，还有指令语法(解析标签：包括标签属性，标签体内容，绑定事件等等)，这两者一起构成了Vue的模板语法 >  指令语法  标签中的属性，

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 328 阅读