zoukankan      html  css  js  c++  java
  • vue基础---09表单输入绑定

    00.radio(单选)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- v-model会将输入框中的value与data中的sex进行双向绑定 -->
            <input type="radio" value="男" name="sex" v-model="sex"><input type="radio" value="女" name="sex" v-model="sex"><h2>你选择的性别是:{{sex}}</h2>
        </div>
        <script>
            var app=new Vue({
                el:'#app',
                data:{
                    sex:''
                }
            })
        </script>
    </body>
    </html>

    01.checkbox(多选)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <label for="agree">
                <input type="checkbox" id="agree" v-model="isAgree">同意协议<br/>
            </label>
                {{isAgree}}<br/>
                <button :disabled="!isAgree">下一步</button>
            
        </div>
        <script>
            var app=new Vue({
                el:'#app',
                data:{
                    isAgree:false
                }
            })
        </script>
    </body>
    </html>

    02.v-model原理

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            v-on:input动态监听输入的数据,当你在input框中输入数据事,就会触发v-on:input事件
            <input type="text" :value="message" v-on:input="show">
            <h2>{{message}}</h2>
        </div>
        <script>
            var app=new Vue({
                el:'#app',
                data:{
                    message:"hello"
                },
                methods:{
                    show:function(event){
                        this.message=event.target.value;
                    }
                }
            })
        </script>
    </body>
    </html>

    03.值的双向绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 -->
            单行文本
            <h2>{{message}}</h2>
            <input type="text" name="username" v-model="message" value=""><hr/>
    
    
            多行文本
            <h2>{{messages}}</h2>
            <!-- v-model的值就是绑定的变量 -->
            <textarea name="" id="" cols="30" rows="10" v-model="messages" value=""></textarea><hr/>
    
    
            多个复选框
            <h2>{{checkboxnames}}</h2>
            <form action="">
                <span v-for="item in arr">
                    {{item}}
                    <input type="checkbox" :value="item" v-model="checkboxnames">
                </span>
            </form><hr/>
    
    
    
    
    
            单选框按钮
            <h2>{{radioboxName}}</h2>
            <form action="">
                <span v-for="item in arr">
                    {{item}}
                    <input type="radio" :value="item" v-model="radioboxName">
                </span>
            </form><hr/>
    
    
    
    
            单选择框<br/>
            <h2>{{chooseCity}}</h2>
            <select name="" id="" v-model="chooseCity">
                <option  v-for="item in citys">{{item}}</option>
            </select><hr/>
    
    
    
    
            多选择框
            <h2>{{moreCity}}</h2>
            <!-- multiple多选属性 -->
            <!-- 注:按住ctrl键多选 -->
            <select name="" id="" v-model="moreCity" multiple="multiple">
                <option v-for="item in citys">{{item}}</option>
            </select><hr/>
    
    
            由于v-model绑定的都是字符串,可以通过.number将其改为数字(通过下面的监听测试)
            <input name="age" type="text" v-model.number="age" value=""/><hr/>
    
    
     
            由于v-model 在每次 input 事件触发后将输入框的值与数据进行同步(就是每次输入都会触发,导致效率低),就可以使用.lazy,
            <!-- lazy:当你输入完才会去触发 -->
            <input type="text" value="" v-model.lazy="age" name="age"><hr>/
    
    
            .trim自动过滤用户输入的收尾空白符
            <h2>{{overflow}}</h2>
            <input type="text" v-model.lazy.trim="overflow">
    
    
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    message:"小明",
                    messages:"晓红",
                    arr:['Jack','John','Mike'],
                    checkboxnames:[],
                    radioboxName:[],
                    citys:['北京','上海','深圳'],
                    chooseCity:"",
                    moreCity:[],
                    age:16,
                    overflow:"nihao"
                },
                watch:{
                    age:function(val){
                        console.log("v-model绑定值由字符串变为数字:"+val);
                    }
                }
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    mysql初始化/usr/local/mysql/bin/mysqld: error while loading shared libraries: libnuma.so.1: cannot open shared object file: No such file or directory
    centos重启出现type Control-D to continue【fsck使用】
    find 常用命令
    保持简单----纪念丹尼斯•里奇(Dennis Ritchie)
    最有效的五个方法,彻底控制你的负面情绪,你有吗
    ERROR 1366 (HY000): Incorrect string value: 'xE9x83x91xE5xB7x9E' for column 'aa' at row 1 MySQL 字符集
    Got fatal error 1236 from master when reading data from binary log: 'Could not find first log file name in binary log index file'
    mysql从5.6升级到5.7后出现 Expression #1 of ORDER BY clause is not in SELECT list,this is incompatible with DISTINCT
    mysqld_safe error: log-error set to '/data/log/mysqld.log', however file don't exists. Create writable for user 'mysql'.The server quit without updating PID file (/data/mysql/mysqld.pid)
    ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
  • 原文地址:https://www.cnblogs.com/hunter1/p/15250812.html
Copyright © 2011-2022 走看看