資料結構
網路
關係型資料庫管理系統
作業系統
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/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 動態新增或刪除列表中的元素。我們查看了兩個示例。
2K+ 閱讀量
