Vue项目4：Vue数据的增删查改

本博客在 Vue项目3 的基础上进行。

 

基本思路是添加Users组件，并用Vue对User的内容进行增加、删除、查询（显示User）、修改（样式）等操作。

 

1. 添加Users组件

1）在src/components目录下新建Users.vue，初始代码如下：

<template>
<div class="users">
<h1>Users</h1>
</div>
</template>

<script>
export default {
name: 'users',
data(){
return {

}
},
methods:{

}

}
</script>

<style scoped>

</style>

2）修改App.vue

使用Users组件：用import引入Users；在components语句中添加Users，并import引入Users

代码如下：

import Users from './components/Users'

export default {
name: 'App',
components: {
Test, Users
}
}

在div里使用<users></users>

<div id="app">
<users></users>
</div>

保存后，用npm run dev命令启动项目，浏览器显示如下：

 

2.增加Users用户

1）修改Users.vue，添加users用户数据，代码如下：

data(){
return {
users: [
{
name: 'zhangsan',
email: 'zs@abc.com',
contacted: false
},
{
name: 'lisi',
email: 'ls@abc.com',
contacted: false
},
{
name: 'wangwu',
email: 'ww@abc.com',
contacted: false
}
]
}
},

定义了3条数据，每条数据包括name、email、contaceted三个属性。

 

显示用户，在Users.vue的div里添加如下代码：

<div class="users">
<h1>Users</h1>
<ul>
<li v-for='user in users'>
{{user.name}}:{{user.email}}
</li>
</ul>
</div>

浏览器效果如下：

2）动态添加用户

通过input输入框动态添加用户 

修改Users.vue，添加form表单，代码如下：

<form v-on:submit="addUser">
<input type="text" v-model="newUser.name" placeholder="Enter Name">
<br>
<input type="text" v-model="newUser.email" placeholder="Enter Email">
<br>
<input type="submit" value="Submit">
</form>

添加addUser方法

methods:{
addUser: function(e){
console.log('add User');//控制台打印输出log
//将输入的内容添加到用户users中
this.users.push({
name: this.newUser.name,
email: this.newUser.email
});
e.preventDefault();//添加这句才看到console有输出
}

在data里添加newUser

newUser:{},

浏览器效果如下：

 

3.修改用户样式

思路：给用户添加checkbox多选框，设置选中时有横线穿过文字

修改Users.vue，在li里添加input，类型为checkbox的多选框，绑定数据为user.contacted，通过设置span的class为contacted来修改span样式，代码如下：

<ul>
<li v-for='user in users'>
<input type="checkbox" class="toggle" v-model="user.contacted">
<span :class="{contacted: user.contacted}">
{{user.name}}:{{user.email}}
</span>
</li>
</ul>

定义style样式

<style scoped>
.contacted{
text-decoration: line-through;
}
</style>

保存后浏览器效果如下：

 

4.删除用户

思路：添加删除用户按钮，点击按钮后执行删除方法

修改Users.vue，span内容右侧添加一个删除按钮<button v-on:click="deleteUser(user)">x</button>

<ul>
<li v-for='user in users'>
<input type="checkbox" class="toggle" v-model="user.contacted">
<span :class="{contacted: user.contacted}">
{{user.name}}:{{user.email}} <button v-on:click="deleteUser(user)">x</button>
</span>
</li>
</ul>

在methods添加deleteUser(user)方法

deleteUser: function(user){
this.users.splice(this.users.indexOf(user),1);//删除用户，indexOf为删除哪个用户，1为删除1条数据
}

保存后，刷新浏览器，如下：

点击删除按钮后，删除了一条数据，效果如下：

 

完成！ enjoy it！