表单控件绑定之checkbox

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>HelloWorld</title>  
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>    
<body>    
    <div id="app">  


    <input type="checkbox" id="flash" value="flash" v-model="bizLines"></input>   
    <label for="flash">快车</label>

    <input type="checkbox" id="premium" value="premium" v-model="bizLines"></input>   
    <label for="premium">专车</label>

    <input type="checkbox" id="bus" value="bus" v-model="bizLines"></input>   
    <label for="bus">巴士</label>
    <br/>   
    </div> 
    <script>  
    new Vue({  
        el:'#app',  
        data: {  
            bizLines:[] 
        }  
    }); 
    </script>  
</body>  
</html>  

以上代码生成界面:
这里写图片描述

功能:
当点击三个复选框的时候,复选框中的内容会被存储进vue实例data当中的bizLines数组。

猜你喜欢

转载自blog.csdn.net/e_li_na/article/details/79857846