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

  • 相关阅读:
    Xamarin 技术全解析
    Winform文件下载之WinINet
    MFC中动态添加控件----寻找多年的秘籍,吐血推荐
    CWnd与HWND的区别与转换
    WinExec, ShellExecute,CreateProcess 区别
    第一个OpenGL程序
    C++ GDI图形设备接口
    oracle直接读写ms sqlserver数据库(一)如何下载oracle database gateway for sqlserver
    Android签名详解
    7款精美HTML5应用
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/6410294.html
Copyright © 2011-2022 走看看