极客笔记如何使用VueJS动态添加或删除列表元素
Vue可以被定义为建立用户界面的渐进式框架。它具有多个指令，可以根据用户的需求使用。基本核心库主要专注于构建视图层，并且也很容易使用其他库或与它们集成。
我们可以使用v-model指令在VueJS中动态添加或删除列表元素。在使用该指令时，所有可能性都绑定到一个单一通道上。当用户从多个选项中选择一个选项时，它将被添加到列表中。在取消选择该元素时，它将从列表中动态删除。以下列表显示了元素的动态添加和删除。
语法
使用v-model指令的语法如下所示：
<input type="text" id="name" v-model="username">
<p>Hello, {{ username }}!</p>
这里， username 数据属性的值通过v-model指令与input元素的值绑定在一起。当用户在输入框中输入时，username的值将自动更新。更新后的username值在模板中用于向用户显示个性化的问候消息。
v-model指令还可以与其他表单元素（如复选框、单选按钮和select元素）一起使用，将它们的值绑定到Vue.js的数据属性上。
示例
将以下代码片段复制粘贴到您的vue项目中，并运行该项目。您将在浏览器窗口中看到以下输出。
- 文件名 – app.js
-
目录结构 – $project/public – app.js
// Dynamically updating the list
const parent = new Vue({
el : '#parent',
data : {
subjects : []
}
})
-
文件名 – index.html
-
目录结构 — $project/public — index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p><strong>Choose Subjects you want to opt:</strong></p>
<input type="checkbox" id="chemistry" value="chemistry" v-model="subjects">
<label for="chemistry">Chemistry</label>
<input type="checkbox" id="physics" value="physics" v-model="subjects">
<label for="physics">Physics</label>
<input type="checkbox" id="maths" value="maths" v-model="subjects">
<label for="maths">Maths</label>
<input type="checkbox" id="accounts" value="accounts" v-model="subjects">
<label for="accounts">Accounts</label>
<input type="checkbox" id="biology" value="biology" v-model="subjects">
<label for="biology">Biology</label>
<p><strong>Subjects You Like:</strong>
{{ subjects }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
运行以下命令以获取以下输出−
C://my-project/ > npm run serve
完整代码
我们可以将上述代码合并到一个HTML文件中。这样可以让我们在HTML中运行代码。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p><strong>Choose Subjects you want to opt:</strong></p>
<input type="checkbox" id="chemistry" value="chemistry" v-model="subjects">
<label for="chemistry">Chemistry</label>
<input type="checkbox" id="physics" value="physics" v-model="subjects">
<label for="physics">Physics</label>
<input type="checkbox" id="maths" value="maths" v-model="subjects">
<label for="maths">Maths</label>
<input type="checkbox" id="accounts" value="accounts" v-model="subjects">
<label for="accounts">Accounts</label>
<input type="checkbox" id="biology" value="biology" v-model="subjects">
<label for="biology">Biology</label>
<p><strong>Subjects You Like:</strong>
{{ subjects }}
</p>
</div>
<script>
// Dynamically updating the list
const parent = new Vue({
el : '#parent',
data : {
subjects : []
}
})
</script>
</body>
</html>
当您点击复选框时，相应的主题将被添加到主题列表中，当您取消选择复选框时，相应的主题将从列表中移除。
示例
在下面的示例中，我们使用HTML，CSS和VueJS演示了动态地向列表中添加和删除元素。
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Add/Remove List Items with VueJS</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
input {
margin-right: 10px;
}
button {
background-color: #ccc;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<h2>Dynamically Add/Remove List Items with VueJS</h2>
<form @submit.prevent="addItem">
<input type="text" v-model="newItem" placeholder="Enter new item">
<button type="submit">Add Item</button>
</form>
<ul>
<li v-for="(item, index) in items" :key="index">
<span>{{ item }}</span>
<button @click="removeItem(index)">Remove</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
newItem: '',
items: ['Item 1', 'Item 2', 'Item 3']
},
methods: {
addItem() {
if (this.newItem) {
this.items.push(this.newItem);
this.newItem = '';
}
},
removeItem(index) {
this.items.splice(index, 1);
}
}
});
</script>
</body>
</html>
在上面的示例中，我们使用v-for指令来显示元素。我们定义了两个方法 – removeItem()和addItem()以删除和添加元素到列表中。为了实现removeItem()方法，我们使用splice()方法，而对于实现addItem()方法，我们使用push()方法。
在本教程中，我们学习了如何使用Vue.js动态地添加或删除列表中的元素。我们看了两个示例。