v-if v-else-if v-else

weixin_33730836

于 2018-06-03 22:00:00 发布

阅读量80

点赞数

文章标签： javascript ViewUI

本文通过一个简单的HTML页面展示了如何使用Vue.js实现条件渲染。页面上根据变量type的不同值显示不同的内容，具体包括A、B、C选项以及一个默认选项。此示例使用了v-if、v-else-if和v-else指令来实现这一功能。

1.代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>测试</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
  </div>
      
  <script>
    new Vue({
      el: '#app',
      data: {
        type: 'C'
      }
    })
  </script>
</body>
</html>