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-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>

效果如下:

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45664402/article/details/114489643