vue条件渲染

黑色咖啡 Ken

于 2018-07-17 10:30:02 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/a4561614/article/details/81076845

Vue 专栏收录该内容

72 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>条件渲染</title>
</head>

<body>
  <div class="app">
    <!---我们使用 v-if 指令实现同样的功能：也可以用 v-else 添加一个 “else” 块：-->
    <div v-if='ok'>yes</div>
    <div v-else>no</div>
    <!--template-->
    <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    <template v-else>
      <h1>Title2</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    <h1 v-show="ok">Hello!</h1>
  </div>
</body>
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
var vm=new Vue({
  el:'.app',
  data:{
    ok:true,//flase,true
  }
});
</script>

</html>