选择喜欢的
目标: 用户选择栏目，把用户选中的栏目信息的下面列表显示出来
提示: vue变量是数组类型，绑定在checkbox标签上
1.渲染内容 设置key唯一值
代码:
<div v-for="item in arr" :key="item" style="display: inline-block;">
解释如下: 使用“v-for”指令遍历一个名为“arr”的数组，并将数组中的每个项绑定到名为“item”的 变量上。":key" 绑定用于为循环渲染的每个元素分配唯一标识符，可以提高性能并防 止渲染错误。"style" 属性将每个元素的 display 属性设置为 "inline-block"，从 而使它们水平并排显示。
2. 获取数据 将数据渲染到页面
代码:
<input type="checkbox" v-model="checkArr" :value="item"/>
创建了一个带有双向数据绑定的复选框输入元素。"v-model"指令将复选框的状态绑定 到Vue实例中的名为"checkArr"的属性上，意味着对复选框的任何更改都会自动更新 "checkArr"的值，并且反之亦然。":value"属性将复选框的值设置为"item"的值， "item"可能是在Vue组件内定义的变量或属性。总体而言，此代码使用户能够选择 一个或多个复选框，并将它们的值存储在Vue实例中的一个数组("checkArr")中。
3. 创建新的数组 arr数组 和 checkArr数组
-
<span>原内容<span> -
<input>勾选框 -
<li></li>重新遍历内容
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<div v-for="item in arr" :key="item" style="display: inline-block;">
<!-- 1. 每个复选框都得用 value 保存对应的频道名字, 一会被选中可以自动把 value 值装到 v-model 变量中 -->
<input type="checkbox" v-model="checkArr" :value="item"/>
<span>{{ item }}</span>
</div>
<ul>
<!-- 2. 把收集到的数组渲染到li上显示 -->
<li v-for="item in checkArr" :key="item">{{ item }}</li>
</ul>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
arr: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
checkArr: [] // 收集选中的复选框的value值
}
})
</script>
</body>
</html>
