<!DOCTYPE>
<html lang="ZH-cn">
<head>
<meta charset="utf-8" >
<title>标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="内容描述" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
<li>------------分割线-------------</li>
<li v-for="(move,index) in movies">{{index + 1}}.{{move}}</li>
</ul>
</div>
<div id="app-2">
<ul>
<li v-for="(value,key,index) in info">{{value}} - {{key}} - {{index}}</li>
</ul>
</div>
<div id="app-3">
<button @click="toggle">切换显示</button>
<h2 v-show="isShow">我要不要显示呢？</h2>
</div>
</body>
</html>
<script>
let app = new Vue({
el:'#app',
data:{
movies:['星际穿越','盗梦空间','大话西游','少年派的奇幻漂流']
}
})
//比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来
let app2 = new Vue({
el:'#app-2',
data:{
info:{
name:'why',
age:'18',
height:'1.88'
}
}
})
let app3 = new Vue({
el:'#app-3',
data:{
isShow: true
},
methods:{
toggle(){
this.isShow = !this.isShow
}
}
})
</script>
<!--
v-for="movie in movies"
依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
语法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值。
v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
开发中如何选择呢？
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if
methods:{
updateDate:function(){
//1.push方法
this.names.push('why','zs')
//2.pop方法
this.names.pop(")
//3.unshift方法
this.names.unshift('why','zs')
//4.shift方法
this.names.shift()
//5.splice方法
//传递一个index将对应index以及index以后的数据都删除
this.names.splice(2)
//6.sort排序数据
//7.reverse反转数据
//不会修改
//通过下面的方法
}
}
-->