zoukankan      html  css  js  c++  java
  • v-model的选框应用

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    
    <body>
        <div id='app'>
            radio互斥单选框:
            <label>
                <input type="radio" value='篮球' v-model='hobbit'>篮球
            </label>
            <label>
                <input type="radio" value='高尔夫球' v-model='hobbit'>高尔夫球
            </label>
            <label>
                <input type="radio" value='乒乓球' v-model='hobbit'>乒乓球
            </label>
            <br />
            您的选择是:<div>{{hobbit}}</div>
            <br/>
            <br/>
            checkbox多选框:
            <label>
                <input type="checkbox" value='篮球' v-model='hobbits'>篮球
            </label>
            <label>
                <input type="checkbox" value='高尔夫球' v-model='hobbits'>高尔夫球
    
            </label>
            <label>
                <input type="checkbox" value='乒乓球' v-model='hobbits'>乒乓球
    
            </label>
            <label>
                <input type="checkbox" value='羽毛球' v-model='hobbits'>羽毛球
    
            </label>
            <label>
                <input type="checkbox" value='足球' v-model='hobbits'>足球
    
            </label>
            <label>
                <input type="checkbox" value='排球' v-model='hobbits'>排球
    
            </label>
            <br/>
            您的选择是:<div>{{hobbits}}</div>
            <br/>
            <br/>
            值绑定的动态checkbox选择框:
            <label v-for="item in originHobbits">
                <input type='checkbox' :value="item" :id="item" v-model='sel'>{{item}}
            </label>
            <br/>
            您的选择是:<div>{{sel}}</div>
        </div>
    
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    hobbit: '',
                    hobbits: [],
                    originHobbits:['篮球','足球','羽毛球'],
                    sel:[]
                }
            })
        </script>
    </body>
    
    </html>
  • 相关阅读:
    TweenMax_API介绍
    正则表达式基础讲解
    CSS3 calc()的使用
    WebGL框架 -- three.js
    CSS3 box-sizing属性
    prefixfree.js_无前缀脚本
    css样式—字体垂直、水平居中
    JQuery解析json数据
    移动Web开发规范
    Ajax与json在前后端中的细节解惑
  • 原文地址:https://www.cnblogs.com/carry-2017/p/11282079.html
Copyright © 2011-2022 走看看