Vue中的v-model

最新推荐文章于 2024-08-16 15:49:18 发布

原创最新推荐文章于 2024-08-16 15:49:18 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue中的v-model #v-model

vue 专栏收录该内容

10 篇文章

订阅专栏

Vue中的v-model

双向数据绑定：

方向1：data----->view

之前所接触的循环，判断，显示隐藏等指令，主要的功能是将数据绑定到视图

方式：（1）双花括号（2）常见的指令

方向2：view----->data

将表单控件中用户操作的结果绑定到数据

方式：v-model

v-model指令本身就是一个双向数据绑定的指令，即可以将数据绑定到视图，又可以将视图中的结果绑定到数据

修饰符：

.lazy：取代input监听change事件（在输入完之后，失去焦点，再去更新）

.number：输入字符串转为数字

.trim：输入首尾空格过滤

例子：

<body>
    <div id="container">
        <button @click="modifyMsg">修改msg</button>
        <!-- 方向：将定义好的数据绑定到视图
        实现方式：花括号，常见的Vue的指令：v-for，v-if，v-show。。。 -->
        <p>{{msg}}</p>

        <!-- 多数指的是表单控件 input/textarea/select...
        实现方式：v-model -->
        <input type="text" v-model="uesrAddrss">
        <p>{{"用户输入的结果为："+uesrAddrss}}</p>

        <!-- 练习：有两个输入框，一个按钮
        点击按钮时将输入框输入的数据进行求和，将结果输出到控制台 -->

        <input type="text" v-model.number="num1">
        <input type="text" v-model.number="num2">
        <button @click="addSum">计算</button>
        <p>{{"用户输入的结果为："+num3}}</p>


        <input type="text" v-model.trim="myNotes">
        <p>{{myNotes.length}}</p>
    </div>

    <script>
        new Vue({
            el: "#container",
            data: {
                msg: '麻子',
                uesrAddrss: '西安飞天路',
                num1: 0,
                num2: 0,
                num3: 0,
                myNotes:''
            },
            methods: {
                modifyMsg: function () {
                    this.msg = "mazi"
                },
                addSum: function () {
                    this.num3 = this.num1 + this.num2

                }
            }
        })
    </script>
</body>