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

悠悠 2023-07-13 12:15 17阅读 0赞

[xxxx全网 Vue 最XXXXXXX...... 男人看了沉默，女人看了流泪][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>

![vue][]

[xxxx_ Vue _XXXXXXX......]: https://blog.csdn.net/InJavaWeTrust/article/details/104807896
[vue]: https://img-blog.csdnimg.cn/20200311223825824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0luSmF2YVdlVHJ1c3Q=,size_16,color_FFFFFF,t_70