Vue——v-model结合值绑定写法

最新推荐文章于 2024-05-25 09:23:30 发布

Kevin11Yao

最新推荐文章于 2024-05-25 09:23:30 发布

阅读量756

点赞数 2

分类专栏： Vue 文章标签： vue js vue.js javascript

本文链接：https://blog.csdn.net/weixin_45664402/article/details/114489643

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue——v-model结合值绑定写法

<body>
    <div id="app">
        <label v-for='each in originHobbies' :for="each">
            <input type="checkbox" :value='each' :id='each' v-model='hobbies'>{{each}}
        </label>
        <h2 v-if='hobbies.length===0'>您还没有选择项目！</h2>
        <h2 v-else>您选择的项目有：{{hobbies}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好！',
                originHobbies:['篮球','跆拳道','卢本伟','西南石油大学','足球','网球'],
                hobbies:[]
            }
        })
    </script>
</body>

效果如下：

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Kevin11Yao

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue——v-model结合值绑定写法

Vue——v-model结合值绑定写法<body> <div id="app"> <label v-for='each in originHobbies' for="each"> <input type="checkbox" :value='each' :id='each' v-model='hobbies'>{{each}} </label> <h2 v-i
复制链接

扫一扫