<!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>Document</title>
</head>
<body>
<div id="app">
<button @click="clearData()">清空數據</button>
<button @click="recoverData()">恢復數據</button>
<!-- 1. 通過v-show的方式進行隱藏顯示，這樣會出現重復多次標簽判斷 -->
<ul v-show="items.length>0">
<li v-for="item in items">{{item.content}}</li>
</ul>
<div v-show="items.length>0">v-show方式：共有<span v-text="items.length"></span>條數據</div>
<!-- 2. 通過添加div進行包裹統一隱藏顯示方式，這樣會改變原有的DOM模型，div標簽會渲染到頁面上-->
<div v-show="items.length>0">
<ul v-show="items.length>0">
<li v-for="item in items">{{item.content}}</li>
</ul>
<div v-show="items.length>0">通過添加div進行包裹統一隱藏顯示方式:共有<span v-text="items.length"></span>條數據</div>
</div>
<!-- 3. 通過添加template進行包裹統一隱藏顯示方式，這樣不會改變原有的DOM模型-->
<template v-show="items.length>0">
<ul v-show="items.length>0">
<li v-for="item in items">{{item.content}}</li>
</ul>
<div v-show="items.length>0">通過添加template進行包裹統一隱藏顯示方式:共有<span v-text="items.length"></span>條數據</div>
</template>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const items = [
{
id: 1, //主鍵id
content: 'vue.js',//輸入內容
completed: false //是否完成
},
{
id: 2, //主鍵id
content: 'vue.js',//輸入內容
completed: true //是否完成
},
{
id: 3, //主鍵id
content: 'vue.js',//輸入內容
completed: false //是否完成
}
];
new Vue({
el: '#app',
data: {
items
},
methods: {
clearData: function () {
this.items = [];
},
recoverData: function () {
this.items = items
}
}
})
</script>
</body>
</html>
