<!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>