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>