Vue.js 章6 v-model与表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="Vue.2.6.10.js"></script>
</head>
<body>
    <!-- v-model在文本域的用法 -->
    <div id="app1">
        <textarea name="" v-model="text" id="textarea" cols="30" rows="10"></textarea><!--拼音不会更新-->
        <textarea name="" @input = 'handleInput' id="textarea" cols="30" rows="10"></textarea><!--实时更新-->
        <!-- 使用v-model以后,其显示的值只依赖绑定的数据,初始化的value属性和textarea标签之间的值都不会起作用 -->
        <p>输入内容:</p>
        <p style="white-space: pre;">{{ text }}</p>
    </div>

    <div id="app2">
        <input type="radio" :checked = 'picked' @click = 'toggleChecked'>
        <label for="">单选按钮</label>
    </div>
<!-- 组合使用实现互斥选择 -->
    <div id="app3">
        <input type="radio" v-model="picked" value="html!" id="html">
        <label for="html">Html</label>
        <br>
        <input type="radio" v-model="picked" value="css!" id="css">
        <label for="css">Css</label>
        <br>
        <input type="radio" v-model="picked" value="js!" id="js">
        <label for="js">JavaScript</label>
        <br>
        <p>被选中的项:{{ picked }}</p><!--输出的是value中的值-->
        <!-- 原理:v-model配合value,点击按钮/标签——
        v-model你可以理解成是value的更高级,:value(v-bind)属于数据单向绑定,v-model属于双向绑定
        v-model官方给出的说法是:这其实是一个简写的形式,v-model实际执行的是下面的绑定:
        <input type="text" v-bind:value="dataA" v-on:input="dataA = $event.target.value" />
        在本例中则是:<input type="text" v-bind:value="picked" v-on:click="picked = $event.target.value" />
        v-model是动态绑定值到value,然后监听input的input事件获取值后赋给dataA的一个过程。 -->
    </div>

    <!-- 复选框 -->
    <div id="app4">
        <input type="checkbox" v-model="checked" id="checked">
        <label for="checked">选择状态:{{ checked }}</label>
        <br>
        <input type="checkbox" v-model="multichecked" value="html!" id="html">
        <label for="html">Html</label>
        <br>
        <input type="checkbox" v-model="multichecked" value="css!" id="css">
        <label for="css">Css</label>
        <br>
        <input type="checkbox" v-model="multichecked" value="js!" id="js">
        <label for="js">JavaScript</label>
        <br>
        <p>被选中的项:{{ multichecked }}</p>
    </div>

    <div id="app5">
        <select v-model="selected" id="" multiple>
            <!-- 如果option含有value属性,v-model就会优先匹配value的值,如果没有就会匹配option标签内的text -->
            <!-- 给select添加multiple就可以多选 -->
            <!-- 在业务中通常用v-for动态输出option、value与text -->
            <option>html</option>
            <option>css</option>
            <option>js</option>
            <option>jq</option>
            <option>vue</option>
        </select>
        <p>选择的项:{{ selected }}</p>
    </div>
    <!-- 绑定值 -->
    <div id="app6">
        <input type="radio" v-model="picked" :value="value">
        <!-- 别忘了v-model会匹配value的值 -->
        <label for="">单选按钮</label>
        <p>{{ picked }}</p>
        <p>{{ value }}</p>

        <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2" >
        <label for="">复选框</label>
        <p>{{ toggle }}</p>
        <p>{{ value1 }}</p>
        <p>{{ value2 }}</p>
    </div>

    <!-- 常见的表单修饰符 -->
    <div id="app7">
        <input type="text" v-model.lazy="message">
        <!-- 在输入框内容发生改变后才更新 -->
        <p>{{ message }}</p>
        <input type="text" v-model.number="messageNum">
        <!-- 将输入转换为number类型 -->
        <p>{{ messageNum }}</p>
        <input type="text" v-model.trim="messageTrim">
        <!-- 过滤首尾空格 -->
        <p>{{ messageTrim }}</p>
        <!-- 都会同时影响输入框中的值 -->
    </div>
</body>
<script>
    var app1 = new Vue({
       el:"#app1",
       data:{
           text:''
       },
       methods: {
           handleInput:function(e){
               console.log(e,e.target);
               this.text = e.target.value;
               //InputEvent {isTrusted: true, data: "s", isComposing: true, inputType: "insertCompositionText",
                // dataTransfer: null, …} 
                // <textarea name id=​"textarea" cols=​"30" rows=​"10">​</textarea>​
           }
       },
    });

    var app2 = new Vue({
       el:"#app2",
       data:{
           picked:true
       },
       methods:{
           toggleChecked:function(){
               this.picked = !this.picked;
           }
       }
    });

    var app3 = new Vue({
        el:"#app3",
        data:{
            picked:''
        }
    });

    var app4 = new Vue({
       el:"#app4",
       data:{
           checked:'',//这里应该是Vue内置的吧,不然真的没道理...
        //    multichecked:'' 会变为true/false,错误写法
           multichecked:[]
       } 
    });

    var app5 = new Vue({
       el:"#app5",
       data:{
            selected:['html','css'],//要用ctrl+option的方式多选也是醉了
       }, 
    });

    var app6 = new Vue({
       el:"#app6",
       data:{
            picked:false,
            value:123,//选中时app.picked===app.value
            toggle:false,
            value1:'a',//选中:app.toggle === app.value1,反之value2  这个应该也是自带的吧...
            value2:'b'
       } 
    });

    var app7 = new Vue({
       el:"#app7",
       data:{
            message:'',
            messageNum:'',
            messageTrim:''
       }, 
    });
</script>
</html>

 

上一篇:转:Windows RPC编程详解


下一篇:3. 51——LCD1602显示 字符 或 字符串