数组的响应方式

        <div id="app">
			<ul>
				<li v-for="item in letters">{{item}}</li>
			</ul>
			<h2>{{name}}</h2>
			<h2>{{title.age}}</h2>
			<button @click="btn">替换</button>
		</div>
		
		<script src="vue.js"></script>
		<script type="text/javascript">
			const vm = new Vue({
				el:"#app",
				data(){
					return{
						letters:["a","b","c","d","e"],
						name:"张三",
						title:{age:18}
					}
				},
				methods:{
					btn(){
						this.letters[1] = "替换的值"
						console.log(this.letters);  //通过数组索引替换值在页面中没有效果，只能在控制台看到
						// this.name = "李四"		//但是对象和简单数据类型可以直接修改，这是数组的响应式
						// this.title.age = 20		//可以通过下面原生js办法来替换或修改等操作
						
						
						
						// this.letters.push("f")   //在数组尾部添加一个f
						// this.letters.pop()       //删除数组最后一个元素
						// this.letters.shift()     //删除数组第一个元素
						// this.letters.unshift("aaa","bbb") //添加在最前面，可以添加多个
						// this.letters.splice(1,1,"aaa")//替换索引值为1的后面的一个元素为aaa
						// this.letters.reverse()     //将数组反转
					}
				}
			})
		</script>