xxxx全网 Vue 最XXXXXXX...... 男人看了沉默，女人看了流泪

<dir id="app">
	<ul>
		<li v-for="(book, index) in books">{{index + 1}} - {{book}}</li>
		<input type="text" placeholder="请输入要添加的内容" ref="push"></input><button v-on:click="push">push</button></br>
		<button v-on:click="pop">pop</button></br>
		<button v-on:click="shift">shift</button></br>
		<input type="text" placeholder="请输入要添加的内容" ref="unshift"></input><button v-on:click="unshift">unshift</button></br>
		<button v-on:click="sort">sort</button></br>
		<button v-on:click="reverse">reverse</button></br>
		<input type="text" placeholder="下标" ref="splice_index" style="width:35px"></input>
		<input type="text" placeholder="len,0则添加" ref="splice_len" style="width:75px"></input>
		<input type="text" placeholder="内容" ref="splice_msg" style="width:35px"></input><button v-on:click="splice_add">splice添加</button></br>
		<input type="text" placeholder="下标" ref="splice_index2" style="width:35px"></input>
		<input type="text" placeholder="len,0则添加" ref="splice_len2" style="width:75px"></input>
		<input type="text" placeholder="内容" ref="splice_msg2" style="width:35px"></input><button v-on:click="splice_replace">splice替换</button></br>
		<input type="text" placeholder="下标" ref="splice_index3" style="width:35px"></input>
		<input type="text" placeholder="len,删除长度" ref="splice_len3" style="width:75px"></input>
		</input><button v-on:click="splice_del">splice删除</button></br>
		<input type="text" placeholder="请输入要查找的内容" ref="filter"></input><button v-on:click="filter">filter</button></br>
		<input type="text" placeholder="请输入内容" ref="concat"></input><button v-on:click="concat">concat</button></br>
		<input type="text" placeholder="start" ref="slice_start" style="width:60px"></input>
		<input type="text" placeholder="end" ref="slice_end" style="width:60px"></input>
		</input><button v-on:click="slice">slice</button></br>
	</ul>
</dir>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			books: ['Java核心技术', 'Vue.js实战', 'ZooKeeper', 'Canal', 'Maven In Action']
		},
		methods: {
			push:function() {
				if (this.$refs.push.value == '') {
					alert("不能为空！！！");
					return;
				} else {
					vm.books.push(this.$refs.push.value);
					this.$refs.push.value = '';
				}
			},
			pop:function() {
				if (vm.books.length == 0) {
					alert("已经删光了呦！！！");
				} else {
					vm.books.pop();
				}
			},
			shift:function() {
				if (vm.books.length == 0) {
					alert("已经删光了呦！！！");
				} else {
					vm.books.shift();
				}
			},
			unshift:function() {
				if (this.$refs.unshift.value == '') {
					alert("不能为空！！！");
					return;
				} else {
					vm.books.unshift(this.$refs.unshift.value);
					this.$refs.unshift.value = '';
				}
			},
			sort:function() {
				vm.books.sort();
			},
			reverse:function() {
				vm.books.reverse();
			},
			splice_add:function() {
				if (this.$refs.splice_index.value == '') {
					alert("下标不能为空！！！");
					return;
				} else if (this.$refs.splice_len.value == '') {
					alert("len不能为空！！！");
					return;
				} else if (this.$refs.splice_msg.value == '') {
					alert("内容不能为空！！！");
					return;
				} else {
					vm.books.splice(this.$refs.splice_index.value, this.$refs.splice_len.value, this.$refs.splice_msg.value);
					this.$refs.splice_index.value = '';
					this.$refs.splice_len.value = '';
					this.$refs.splice_msg.value = '';
				}
			},
			splice_replace:function() {
				if (this.$refs.splice_index2.value == '') {
					alert("下标不能为空！！！");
					return;
				} else if (this.$refs.splice_len2.value == '') {
					alert("len不能为空！！！");
					return;
				} else if (this.$refs.splice_msg2.value == '') {
					alert("内容不能为空！！！");
					return;
				} else {
					vm.books.splice(this.$refs.splice_index2.value, this.$refs.splice_len2.value, this.$refs.splice_msg2.value);
					this.$refs.splice_index2.value = '';
					this.$refs.splice_len2.value = '';
					this.$refs.splice_msg2.value = '';
				}
			},
			splice_del:function() {
				if (vm.books.length == 0) {
					alert("已经删光了呦！！！");
					return;
				}
				if (this.$refs.splice_index3.value == '') {
					alert("下标不能为空！！！");
					return;
				} else if (this.$refs.splice_len3.value == '') {
					alert("len不能为空！！！");
					return;
				} else {
					vm.books.splice(this.$refs.splice_index3.value, this.$refs.splice_len3.value);
					this.$refs.splice_index3.value = '';
					this.$refs.splice_len3.value = '';
				}
			},
			filter:function() {
				let content = this.$refs.filter.value;
				if (content == '') {
					alert("内容不能为空！！！");
					return;
				}
				vm.books = vm.books.filter(function(item) {
					return item == content;
				});
			},
			concat:function() {
				let content = this.$refs.concat.value;
				if (content == '') {
					alert("内容不能为空！！！");
					return;
				}
				vm.books = vm.books.concat(content);
				this.$refs.concat.value = '';
			},
			slice:function() {
				let start = this.$refs.slice_start.value;
				let end   = this.$refs.slice_end.value;
				if (start == '') {
					alert("start不能为空！！！");
					return;
				}
				if (end == '') {
					alert("end不能为空！！！");
					return;
				}
				vm.books = vm.books.slice(start, end);
				this.$refs.slice_start.value = '';
				this.$refs.slice_end.value = '';
			}
		}
	});

</script>