VueDay09表单输入绑定

Vue中的一些表单输入绑定：（单选框和复选框的实现）一些特殊的修饰符的使用

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <h2>{{username}}</h2>
            <!-- 单行文本输入框 -->
            <h1>单行文本输入框</h1>
            <!-- 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步 -->
            <input type="text" name="username" v-model.lazy.trim="username" value="">
            <!-- <p>{{username}}</p> -->
            <h1>多行文本输入框</h1>
            <textarea v-model="username" rows="" cols="">
                
            </textarea>
            <h1>复选框:选择喜欢的水果</h1>
            <span v-for="item in fruits" >
                {{item}}
               <input type="checkbox" v-model="checkFruits" name="fruit" id="" :value="item" />
            </span>
            <h2>{{checkFruits}}</h2>
            <h1>单选框:选择你最喜欢的水果</h1>
            <span v-for="item in fruits" >
                {{item}}
               <input type="radio" v-model="radioFruits" name="fruit" id="" :value="item" />
            </span>
            <h2>{{radioFruits}}</h2>
            
            <h1>选项框：选择你居住的城市</h1>
            <select v-model="chooseCity">
                <!-- 由于iOS的bug需要在选择前提供一个禁用的选项代码是下面这一行 -->
                <option disabled="" value ="">请选择</option>
                <option  v-for="item in citys" :value ="item">{{item}}</option>        
            </select>
            <h3>{{chooseCity}}</h3>
            
            <!-- 按住Ctrl选择 -->
            <h1>选项框：选择你喜欢的城市</h1>
            <select v-model="moreCity" multiple="multiple">
                <option  v-for="item in citys" :value ="item">{{item}}</option>        
            </select>
            <h3>{{moreCity}}</h3>
            
            <!-- v-model.number -->
            <h1>将字符串变为数字获取</h1>
            <input type="text" name="age" v-model.number="age" id="" value="" />
            
        </div>
        <script type="text/javascript">
            let app =new Vue({
                el:"#app",
                data:{
                    username:'小明',
                    fruits:['苹果','雪梨','香蕉','葡萄'],
                    checkFruits:[],
                    radioFruits:"",
                    citys:['北京','上海','深圳','广州'],
                    chooseCity:"",
                    moreCity:[],
                    age:16
                },
                watch:{
                    age:function(val){
                        console.log(val)
                    }
                }
            })
        </script>
    </body>
</html>

 

posted @ 2020-09-24 11:57  peifengyang  阅读(130)  评论(0)  编辑  收藏  举报