vue小练习之显示选中的数据

2023-12-14 21:32:54
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .lists {
            display: inline-flex;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>请选择你喜欢的专栏</h3>
        <div class="lists" v-for="item in list" :key="index">
            <input type="checkbox" :value="item" v-model="arrChecked">{{item}}
        </div>
        <ul>
            <li v-for="(item,index) in arrChecked" :key="item.id">{{item}}</li>
        </ul>


    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                list: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
                // isChecked: false,
                arrChecked: []
            },
        })
    </script>
</body>

</html>

文章来源:https://blog.csdn.net/m0_56713342/article/details/135004100
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。