vue基础知识点案例 Vue.js 条件语句（一看就懂 ）

 这个相对简单的网页程序了，还有比这更简单的吗？ 

 

效果

 

 

 代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 条件语句</title>
     <!-- vue程序书写第一条  首先是引入vue.js ! -->
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="ifyuju">
        <!-- 在元素 和 template 中使用 v-if 指令： -->
        <p v-if="seen">现在你看到我了</p>
        <template v-if="ok">
          <h1>菜鸟教程</h1>
          <p>学的不仅是技术，更是梦想！</p>
          <p>哈哈哈，打字辛苦啊！！！</p>
        </template>
    </div>
        
    <script>
    new Vue({
      el: '#ifyuju',
      data: {
        seen: true,
        ok: true
      }
    })
    </script>
</body>
</html>
posted @ 2021-07-01 17:06  优敏行  阅读(77)  评论(0)    收藏  举报