实例
下面是一个 Vue.js 处理复选框的入门案例：
步骤 1: 创建 HTML 结构
首先，创建一个 HTML 文件，并设置基本的结构和 Vue 实例的挂载点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 复选框案例</title>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>选择你喜欢的水果：</h2>
<form>
<label>
<input type="checkbox" value="苹果" v-model="selectedFruits"> 苹果
</label>
<label>
<input type="checkbox" value="香蕉" v-model="selectedFruits"> 香蕉
</label>
<label>
<input type="checkbox" value="橘子" v-model="selectedFruits"> 橘子
</label>
</form>
<p>你选择了：{{ selectedFruits.join(', ') }}</p>
</div>
<script>
// 初始化 Vue 实例
new Vue({
el: '#app',
data: {
selectedFruits: [] // 用于存储选中的水果
}
});
</script>
</body>
</html>步骤 2: 使用 v-model 指令
在每个复选框 <input> 元素上使用 v-model 指令，将其绑定到 selectedFruits 数组。这个数组将存储所有被选中的复选框的值。
<input type="checkbox" value="苹果" v-model="selectedFruits"> 苹果步骤 3: 显示选中的项
在页面上，我们使用 {{ selectedFruits.join(', ') }} 来显示当前选中的水果。当用户选中或取消选中复选框时，selectedFruits 数组将自动更新，Vue 将重新渲染页面以反映当前的选中状态。
<p>你选择了：{{ selectedFruits.join(', ') }}</p>步骤 4: 运行案例
保存 HTML 文件并在浏览器中打开它，你将看到一个包含三个复选框的表单。用户可以勾选他们喜欢的水果，页面将实时更新显示他们的选择。
这个案例展示了 Vue.js 如何轻松处理复选框和用户输入，以及如何使用数组来管理一组数据。
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
