Vue 常用指令 v-model 双向数据绑定

之前的指令,无论使用哪一种,都是在代码当中定义的内容。在web开发当中经常要去获取用户的输入,v-model可以十分方便的将表单的值和实例当中的数据关联起来。

这样就可以十分便捷的获取和设置表单元素的值了。(注意是表单元素)

v-model


获取和设置表单元素的值(双向数据绑定)

v-nodel需要和表单元素一起使用,文本框它要去和data当中的数据进行绑定,这里添加了message,接下来使用v-midel指令将想要绑定的数据设置给表单元素。解析完毕之后两个的值就会关联起来。

什么叫双向呢?也就是一解析之后message的值同步到表单上面,更改了表单元素的值之后,它也会将这次的更新同步到message的上面。一来一回就是两个方向。

双向数据绑定就是更改两边的数据任何一边,它们都会同步更新对方的值。

这使用h2标签,然后使用v-text的指令的缩写,两个大括号{{}}。下面其实也就是更改表单元素值的时候,它确实同步更新了msg值。

另外一个去获取msg的值,使用v-on加上事件修饰符,用一个键盘事件。

有了v-model指令之后,就可以十分便捷的将表单元素的值和data当中的数据进行绑定,无论设置还是获取都会变得非常的简单快捷。

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="vue">
        <button type="button" @click="setmsg()">修改msg</button>
        <input type="text" v-model="msg" @keyup.enter="getmsg()">
        <h1>{{msg}}</h1>
    </div>

    <script type="text/javascript">
      new Vue({   
          el: "#vue",   
          data:{ 
             msg: "vue-model"
          },
          methods:{
          setmsg:function(){
            this.msg = "xxxxxx"
          },
          getmsg:function(){
            alert(this.msg)
          },    
       }
    }
)

    </script>

</body>

</html>
相关推荐
flower_tomb12 分钟前
对浏览器事件机制的理解
前端·javascript·vue.js
超人不会飛15 分钟前
仿豆包 H5应用核心模板:用Vue快速复刻大模型对话体验
前端·javascript·vue.js
程序张19 分钟前
Vue3+Vite 现代化前端框架👊打破 Chrome 83 内核限制
前端·javascript·vue.js
拜无忧20 分钟前
【教程】Vue中级转React终极指南-理解Vue和React的差异
前端·vue.js·react.js
Java陈序员26 分钟前
听歌体验直接拉满!推荐一款高颜值音乐播放器!
vue.js·docker·vite
艾小码30 分钟前
还在重复造轮子?3个Vue3组合函数让你开发效率翻倍!
前端·javascript·vue.js
我是日安34 分钟前
从零到一打造 Vue3 响应式系统 Day 3 - 订阅者模式:响应式设计基础
前端·vue.js
拜无忧34 分钟前
【知识点】vue3不常用api总结-针对前端中级-进阶
前端·vue.js·性能优化
muchu_CSDN1 小时前
谷粒商城项目-P16快速开发-人人开源搭建后台管理系统
前端·javascript·vue.js
叫我詹躲躲1 小时前
前端竟能做出这种专业医疗工具?DICOM Viewer 医学影像查看器
前端·javascript·vue.js