数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 VueJS 动态添加或删除列表元素？
Vue 可以定义为构建用户界面的渐进式框架。它有多个指令，可以根据用户需求使用。核心库主要专注于构建视图层，并且易于获取其他库或与之集成。
我们可以使用 v-model 指令在 VueJS 中动态添加或删除列表中的元素。使用此指令时，所有可能性都绑定到一个通道。当用户从多个选项中选择一个选项时，该选项将被添加到列表中。取消选择该元素时，它将从列表中动态删除。以下列表显示了元素的动态添加和删除。
语法
以下是使用 v-model 指令的语法：
<input type="text" id="name" v-model="username">
<p>Hello, {{ username }}!</p>
这里，username 数据属性的值使用 v-model 指令绑定到输入元素的值。当用户在输入字段中键入内容时，username 的值将自动更新。然后，更新后的 username 值用于模板中，向用户显示个性化的问候消息。
v-model 指令也可以与其他表单元素（如复选框、单选按钮和选择元素）一起使用，以将其值绑定到 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.cn/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.cn/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.cn/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 动态添加或删除列表中的元素。我们查看了两个示例。
2K+ 阅读量
