vue基础---09表单输入绑定

2021年09月15日 阅读数:1
这篇文章主要向大家介绍vue基础---09表单输入绑定,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

00.radio(单选)javascript

<!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(多选)html

<!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原理vue

<!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.值的双向绑定java

<!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>