Vue实现简单的列表增加与删除填坑总结

约定不等于承诺〃 2022-06-14 08:08 660阅读 0赞

学习Vue也有快一周的时间了，技痒难耐想做个小DEMO测试下水平，正好看到keepfool的一篇博文：“Vue.js——60分钟快速入门”

**链接：[http://www.cnblogs.com/keepfool/p/5619070.html][http_www.cnblogs.com_keepfool_p_5619070.html]**

文章最后有个demo

![SouthEast][]

功能不难正好适合初学者练手，于是在不看作者代码的情况下复刻一份出来。

首先说说思路，界面结构不难，通过两个input和一个select单选框获得用户信息添加一列到table末尾，同时每列数据都能通过button删除。

遇到的第一个坑在于如何实现隔行变色?

以往用原生js写的思路是循环整个tr，然后求余添加奇偶class；vue是否也可以用类似想法呢？

<tr v-for="person in people">这是基本的遍历语句，其中people是我在viewModel中的数组对象：

data: \{  
people: \[  
\{  
name: 'Jack',  
age: '30',  
gender: 'Male'  
\},  
\{  
name: 'Rose',  
age: '27',  
gender: 'Female'  
\},  
\{  
name: 'Chris',  
age: '46',  
gender: 'Male'  
\},  
\{  
name: 'Faya',  
age: '19',  
gender: 'Female'  
\}  
\]  
\}

那么问题就来了，如何找到一种用来标识数据顺序的变量呢？

在官网v-for章节可以看到这么一段：

`v-for` 还支持一个可选的第二个参数为当前项的索引。

<table style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> 
 <tbody> 
  <tr style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> 
   <td style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> <pre style="">
     
      
     <div style="min-height:1.5em">
      
       
      <span style="color:rgb(41,115,183)">&lt;<span>ul</span> <span>id</span>=<span style="color:rgb(66,185,131)">"example-2"</span>&gt;</span>
     
      
     </div>
     
      
     <div style="min-height:1.5em">  
      
       
      <span style="color:rgb(41,115,183)">&lt;<span>li</span> <span>v-for</span>=<span style="color:rgb(66,185,131)">"(item, index) in items"</span>&gt;</span>
     
      
     </div>
     
      
     <div style="min-height:1.5em">
      
       
          {
       { parentMessage }} - {
       { index }} - {
       { item.message }}
     
      
     </div>
     
      
     <div style="min-height:1.5em">  
      
       
      <span style="color:rgb(41,115,183)">&lt;/<span>li</span>&gt;</span>
     
      
     </div>
     
      
     <div style="min-height:1.5em">
      
       
      <span style="color:rgb(41,115,183)">&lt;/<span>ul</span>&gt;</span>
     
      
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

这样我们就可以用index属性来帮助我们实现这一功能。

接下来，就到了第二个坑，具体怎么利用index来进行求余添加class。第一个想到的就是v-bind:class=""命令绑定methods或者computed，通过求余运算能够双向绑定对应列。

methods: \{  
classState: function(index)\{  
if (index%2==0) \{  
return 'even'  
\} else \{  
return 'odd'  
\}  
｝  
\}

然而相同的办法在computed中却无法实现，究其原因computed默认get函数无法传参，导致我们用到的index参数无法被识别；但我并不甘心找到computed的set函数可以传参，但它需要一个中间变量：

data: {
     
      
     
      
       
          classMid: ''
     
      
     
      
       
      },
     
      
     
      
       
      computed: {
     
      
     
      
       
        classState: {
     
      
     
          
      
       // getter
     
      
     
      
       
          get: 
      
       function () {
     
      
     
      
      
       
      
       return
      
       
      
       this.classMid
     
      
     
      
       
          },
     
      
     
          
      
       // setter
     
      
     
      
       
          set: 
      
       function (index) {
     
      
     
      
      
       
      
       if(index%2==0){ 
     
      
     
      
      
       this.classMid = even
     
      
     
      
      
       }else { 
     
      
     
      
      
       this.classMid = odd
     
      
     
      
      
       }
     
      
     
      
       
          }
     
      
     
      
       
        }
     
      
     
      
       
      }

遗憾的是这种方案看上去可行但并没有作用，网上的说法是虽然set能传参却不能与遍历的内容或者index发生联系，于是作罢。

之后又想到了第三种解决思路：直接使用三元表达式来判断！

<tr v-for="(person, index) in people"  :class="index%2==0?'even':'odd'">这种做法的好处是无需与对象实例关联，也不需要走methods方法每次都要重新渲染页面增加服务器的压力。但缺点也是有的，当逻辑判断表达式很复杂的时候直接写在html中势必会影响页面结构的整洁，显得很笨重。所以两种方案可以根据项目的实际需求合理选择。

接下来是删除列部分，一开始的想法是把选中的tr节点删除，然后刚要想怎么去获取点击button当前的列，就发现犯了一个大错误！

即这种思路还是走了jquery对dom操作的老路子，**而vue正是要抛除dom操作，关注视图层的框架**。

于是乎改邪归正，想到通过删除数组对象对应的数据来达到目的:

<td><button @click="Delete(index)">Delete</button></td>

Delete: function(index)\{  
this.people.splice(index, 1)  
\}

再说说添加新列表。之前我的做法是每个参数绑定都制定一个v-model实例即

<select v-model="newGender">  
<option>Male</option>  
<option>Female</option>  
</select>

data: \{  
newName: '',  
newAge: '',  
newGender: '',

｝

在用户输入对应数据之后，再运行create方法：

Create: function ()\{  
this.people.push(\{

name: this.newName,

age: this.newAge,

gender: this.newGender

\})  
  
\}

此种方法有效，但是又陷入了jQuery dom操作的泥潭，有着创建节点插入节点的影子。参考了作者的做法是创建一个新的对象：

data：｛

newPerson：｛

name: '',  
age: '0',  
gender: 'Male'

｝

同时页面元素v-model也变为v-model="newPerson.name/age/gender", 最后methods变为每次添加这个newPerson对象到数组中，同时重置newPerson以便下一次调用：

Create: function ()\{  
//将newPerson对象插入到数组末尾  
this.people.push(this.newPerson)  
//添加完newPerson对象后，重置它  
this.newPerson = \{  
name: '',  
age: '0',  
gender: 'Male'  
\}  
\}

至此，填坑基本结束。

最后附上自己写的版本，加入了输入检测，比较简单就不多赘述。大家可以与原作者版本对照学习，因为只追求了逻辑功能就没有做css样式，望见谅。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.even {
    			background: #ccc;
    		}
    		.warn {
    			color: red;
    		}
    	</style>
    	<script src="js/vue.min.js"></script>
    </head>
    <body>
    	<div id="app">
    		<fieldset>
    			<legend>Create New Person</legend>
    			<span>Name:</span>
    			<input v-model="newPerson.name" @blur="check_name">
    			<span class="warn">{
       { warnName }}</span>
    			<br>
    			<span>Age:</span>
    			<input v-model="newPerson.age" @blur="check_age">
    			<span class="warn">{
       { warnAge }}</span>
    			<br>
    			<span>Gender:</span>
    			<select v-model="newPerson.gender">
    				<option>Male</option>
    				<option>Female</option>
    			</select>
    			<span>Selected: {
       { newPerson.gender }}</span>
    			<br>
    			<button @click="Create">Create</button>
    			<span class="warn">{
       { warnCreate }}</span>
    			<br>
    			<br>
    			<table border="1px" width="300px">
    				<thead>
    					<td>Name</td>
    					<td>Age</td>
    					<td>Gender</td>
    					<td>Delete</td>
    				</thead>
    				<tbody>
    					<tr v-for="(person, index) in people" :class="index%2==0?'even':'odd'">
    					
    						<td>{
       { person.name }}</td>
    						<td>{
       { person.age }}</td>
    						<td>{
       { person.gender }}</td>
    						<td><button @click="Delete(index)">Delete</button></td>
    					</tr>
    				</tbody>
    			</table>
    		</fieldset>
    	</div>
    	<script>
    		var vm = new Vue({
    			el: "#app",
    			data: {
    				warnName: '',
    				warnAge: '',
    				warnCreate: '',
    				newPerson: {
    					name: '',
    					age: '0',
    					gender: 'Male'
    				},
    				people: [
    					{
    						name: 'Jack',
    						age: '30',
    						gender: 'Male'
    					},
    					{
    						name: 'Rose',
    						age: '27',
    						gender: 'Female'
    					},
    					{
    						name: 'Chris',
    						age: '46',
    						gender: 'Male'
    					},
    					{
    						name: 'Faya',
    						age: '19',
    						gender: 'Female'
    					}
    				]
    			},
    			methods: {
    				Create: function (){
    					if (this.newPerson.name == '' || this.newPerson.age == '') {
    						this.warnCreate = 'Please fullfill all the required items!'
    					} else {
    							this.warnCreate = ''
    							this.people.push(this.newPerson)
    							//添加完newPerson对象后，重置它
    							this.newPerson = {
    								name: '',
    								age: '0',
    								gender: 'Male'
    							}
    					}	
    				},
    				Delete: function(index){
    					this.people.splice(index, 1)
    				},
    				check_name: function (){
    					if (this.newPerson.name == '') {
    						this.warnName = 'Name is required!'
    					} else {
    						this.warnName = ''
    					}
    				},
    				check_age: function (){
    					if (this.newPerson.age == '' || this.newPerson.age == 0) {
    						this.warnAge = 'Age is required!'
    					} else {
    						this.warnAge = ''
    					}
    				}
    				/*,
    				classState: function(index){
    					if (index%2==0) {
    						return 'even'
    					} else {
    						return 'odd'
    					}
    				}*/
    			}
    		})
    	</script>
    </body>
    </html>

**小结：看了再多的视频，学了再多的资料不如自己动手一试，只有碰到问题想办法解决问题才能得到提高。**

[http_www.cnblogs.com_keepfool_p_5619070.html]: http://www.cnblogs.com/keepfool/p/5619070.html
[SouthEast]: /images/20220614/d61dfb5b44e04c38806c6ae9d458132f.png