Vue.js

一、小黑记事本原理实现：
···分为数组类型数据与字符串型数据，在JavaScript语法与数据类型中，字符串string与数组array都是具有length属性，而且都能直接通过下标方式得到某个位置的字符 / 元素， 还有都能使用for…in循环；

1、在data中挂载的是数组类型数据时：

（1） 如其中的ss1: [123, true, null, undefined, "go"]；
（2）
① 点击删除按钮删除某个数组元素，就是让这个数组ss1截去这个对应的元素，使用splice(元素对应下标, 删除个数)方法；删除数组中的第一个元素，要使用shift()方法（在数组中的末尾元素后面添加）；删除末尾位置元素，就用pop()方法；
② 点击添加：1）末尾添加，push()方法；2）第一个位置处添加，unshift()方法；

2、在data中挂载的是字符串型数据时：

（1）如其中的 text1: "abcdef"

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <ul>
  	<li v-for="(ele, i) in text1">
		<strong>{{(i + 1) + "--" + ele}}</strong>
		<button @click="strRemoveEle(i)">&times;</button>
	</li>
  </ul>	
  <ul>
  	<li v-for="(ele, i) in ss1">
		<strong>{{(i + 1) + "--" + ele}}</strong>
		<button @click="arrRemoveEle(i)">&times;</button>
	</li>
  </ul>	
</div>
<script>
new Vue({
  el: '#app',
  data: {
	text1: "abcdef", // 这个是字符串，不是数组
	ss1: [123, true, null, undefined, "go"] //这个是数组
  },
  methods: {
  		// 传入的参数是数字下标
  		arrRemoveEle(i) {
			this.ss1.splice(i, 1);
			// 数组Array对象就有splice()方法
		},
		// 传入的参数是数字下标
		strRemoveEle(i) {
			return (
					this.text1 = this.text1.substring(0, i) 
					+ this.text1.substring(i+1, this.text1.length)
			);
			// 字符串String对象没有splice()方法，但是我想到了substring()方法，
			// 就是将字符串中的某个字符忽略除去，
			// 则相当于字符串长度减小了1个
			
		}
  }
});
</script>

（2）① 点击删除前的情况：

② 点击 字符 c 与字符 d处的删除按钮后的删除情况：