vue学习九(表单输入绑定v-model)

v-model 表单基础用法

你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定，v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

文本

 <div id="div1">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
    </div>


    <script type="text/javascript">
        new Vue({
            el: "#div1",
            data: {
                message: "msg"
            }
        })
    </script>

效果图：当在文本框中输入等等，响应的更新到P标签文本

等等（这里是文本框）
Message is: 等等

多行文本

  <div id="div2">
        <span>Multiline message is:</span>
        <p style="white-space: pre-line;">{{ message }}</p>
        <br>
        <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#div2",
            data: {
                message: "msg"
            }
        })
    </script>

复选框

 <div id="div3">
        <input type="checkbox" id="checkbox" v-model="checkeder">
        <label for="checkbox">{{ checkeder }}</label>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#div3",
            data: {
                checkeder: false
            }
        })
    </script>

多个复选框

<div id='example-3'>
        <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 type="text/javascript">
        new Vue({
            el: "#example-3",
            data: {
                checkedNames: []
            }
        })
    </script>

效果如下：

单选按钮

<div id="example-4">
        <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 type="text/javascript">
        new Vue({
            el: "#example-4",
            data: {
                picked: ""
            }
        })
    </script>

效果如下：

选择框

    <div id="example-5">
        <select v-model="selecteder">
          	<option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selecteder }}</span>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#example-5',
            data: {
                selecteder: ''
            }
        })
    </script>

效果图：

多选择框

 <div id="example-6">
        <select v-model="selected" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>Selected: {{ selected }}</span>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#example-6',
            data: {
                selected: []
            }
        })
    </script>

    <!-- 7、用 v-for 渲染的动态选项： -->
    <div id="div4">
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>

效果图：

v-for 渲染的动态选项

<div id="div4">
        <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 type="text/javascript">
        new Vue({
            el: '#div4',
            data: {
                selected: 'A',
                options: [
                    { text: 'One', value: 'A' },
                    { text: 'Two', value: 'B' },
                    { text: 'Three', value: 'C' }
                ]
            }
        })
    </script>

效果图如下：

lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

   <div id="div5">
        <input v-model.lazy="msg">
        <p>{{ msg }}</p>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#div5",
            data: {
                msg: "信息"
            }
        })
    </script>

number

<div id="div6">
        <input v-model.number="age" type="number">
        <p>{{ age }}</p>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#div6",
            data: {
                age: 5
            }
        })
    </script>

trim

  <div id="div7">
        <input v-model.trim="msg">
        <p>{{ msg }}</p>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#div7",
            data: {
                msg: "  我的  "
            }
        })
    </script>