vue 基礎入門筆記 05:v-for、v-if

September發表於2019-08-14
Vue筆記
  1. v-if 每次都要刪除元素或建立元素

  2. v-show 每次display:none 或者 block

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <button @click="show = !show ">按鈕</button>
    <!-- v-if 每次都要刪除元素或建立元素 -->
    <p v-if='show'>show</p>
    <!-- 每次display:none 或者 block -->

    <p v-show='show'>show</p>
</div>
<script>
    var vm=new Vue({
       el:'#app',
       data:{
           show:true
       },
       methods:{}
    });
</script>
</body>
</html>
本作品採用《CC 協議》，轉載必須註明作者和本文連結
日照香爐生紫煙

相關文章