需求:用户选中栏目 把对应的信息展示在列表
<body>
<div id="app">
<h1>{{title}}</h1>
<form action="">
<span v-for="(item,index) in list" :key="inedx">
<input v-model="arr" type="checkbox" :value="item">{{item}}
</span>
</form>
<!-- 渲染列表 -->
<ul>
<li v-for="(item,index) in arr" :key="index">{{item}}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
title: '请选择你喜欢的专栏',
list: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
arr: [],//用于放li
}
})
</script>