zoukankan      html  css  js  c++  java
  • Vue进阶之表单控件绑定

    1.单行input

    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test-vuejs</title>
    </head>
    <body>
    <div id="example">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
    </div>
    <script src="./js/vue/vue.js"></script>
    
    <script>
        var example = new Vue({
            el: '#example',
            data:{
                message: ''
            }
        })
    
    
    </script>
    </body>
    </html>
    

    2.多行

    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test-vuejs</title>
    </head>
    <body>
    <div id="example">
        <span>Multiline message is:</span>
        <p style="white-space: pre">{{ message }}</p>
        <br>
        <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>
    <script src="./js/vue/vue.js"></script>
    
    <script>
        var example = new Vue({
            el: '#example',
            data:{
                message: ''
            }
        })
    
    
    </script>
    </body>
    </html>
    

    3.单选框

    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test-vuejs</title>
    </head>
    <body>
    <div id="example">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </div>
    <script src="./js/vue/vue.js"></script>
    
    <script>
        var example = new Vue({
            el: '#example',
            data:{
                checked: ''
            }
        })
    
    
    </script>
    </body>
    </html>
    

    4.复选框

    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test-vuejs</title>
    </head>
    <body>
    <div id="example">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
    </div>
    <script src="./js/vue/vue.js"></script>
    
    <script>
        var example = new Vue({
            el: '#example',
            data:{
                checkedNames: []
            }
        })
    
    
    </script>
    </body>
    </html>
    

    5.单选按钮

    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test-vuejs</title>
    </head>
    <body>
    <div id="example">
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
    </div>
    <script src="./js/vue/vue.js"></script>
    
    <script>
        var example = new Vue({
            el: '#example',
            data:{
                picked: ''
            }
        })
    
    
    </script>
    </body>
    </html>
    

    6.选择列表

    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test-vuejs</title>
    </head>
    <body>
    <div id="example">
        <select v-model="selected">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
    <script src="./js/vue/vue.js"></script>
    
    <script>
        var example = new Vue({
            el: '#example',
            data:{
                selected: ''
            }
        })
    
    
    </script>
    </body>
    </html>
    

    7.多选

    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test-vuejs</title>
    </head>
    <body>
    <div id="example">
        <select v-model="selected" multiple>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>Selected: {{ selected }}</span>
    </div>
    <script src="./js/vue/vue.js"></script>
    
    <script>
        var example = new Vue({
            el: '#example',
            data:{
                selected: []
            }
        })
    
    
    </script>
    </body>
    </html>
    

    8.动态选项

    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test-vuejs</title>
    </head>
    <body>
    <div id="example">
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
    <script src="./js/vue/vue.js"></script>
    
    <script>
        var example = new Vue({
            el: '#example',
            data:{
                selected: 'A',
                options: [
                    { text: 'One', value: 'A' },
                    { text: 'Two', value: 'B' },
                    { text: 'Three', value: 'C' }
                ]
            }
        })
    
    
    </script>
    </body>
    </html>
    

    方法论:gif截图很有意思 GifCam

  • 相关阅读:
    log4net使用封装,无缝切换 dotnet 和 dotnetcore
    使用 certbot 申请泛域名https证书
    StackExchange.Redis中文使用文档
    在 asp.net core 中使用类似 Application 的服务
    不一样的 SQL Server 日期格式化
    你可能不知道的 docker 命令的奇淫怪巧
    [k8s]dashboard1.8.1搭建( heapster1.5+influxdb+grafana)
    [k8s]k8s 1.9(on the fly搭建) 1.9_cni-flannel部署排错 ipvs模式
    [k8s] kubelet单组件启动静态pod
    [svc]runinit管理多进程
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/6410294.html
Copyright © 2011-2022 走看看