开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Vue指令 v-model实现 双向数据绑定

简介: Vue指令 v-model实现 双向数据绑定
+关注继续查看

Vue指令之v-model实现双向数据绑定


v-bind 只能实现数据的单向绑定,从 M(Modle) 自动绑定到 V(View), 无法实现数据的双向绑定


使用 v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定


注意: v-model 只能运用在 表单元素中


双向数据绑定案例

image

<!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="./lib/vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
    <h4>{{ msg }}</h4>

    <input type="text" style="width:100%;" v-model="msg">
  </div>
  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ' 我是一个好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!'
      },
      methods: {
      }
    });
  </script>
</body>

</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue数据双向绑定.sync 和v-model
Vue数据双向绑定.sync 和v-model
59 0
SAP UI5和Vue的数据双向绑定实现原理比较
SAP UI5和Vue的数据双向绑定实现原理比较
31 0
Vue的单向数据流和双向数据绑定
Vue的单向数据流和双向数据绑定
25 0
【nodejs进阶之旅(2)】:使用koa2+mysql 实现列表数据分页
分页主要字段包括 pageSize 每页条数、pageNum 第几页、startRow 当前开始页编号、endRow 当前结束页编号、total 总数量。主要是根据前端分页的参数,进行处理后,返回前端正确的数据,其实是一个很常见且简单的功能。
133 0
Vue课程41-事件绑定-了解v-on指令
Vue课程41-事件绑定-了解v-on指令
3 0
<LeetCode天梯>Day038 买卖股票的Zui佳时机(动态规划+双指针) | 初级算法 | Python
<LeetCode天梯>Day038 买卖股票的Zui佳时机(动态规划+双指针) | 初级算法 | Python
40 0
Vue课程50-了解v-model指令的用法
Vue课程50-了解v-model指令的用法
3 0
测试9——为何在数据库在mount阶段可以查询v$datafile_header 视图
大家都知道只有当数据库进入到OPEN状态时,数据文件才被打开,才能读取其中的内容.那在mount状态下,就可以读取v$datafile_header中的信息,为什么呢? 这说明当从nomount状态进入mount状态时,还是扫描了一下数据文件头中的内容的,而且将相应的信息存储到了控制文件中(因为有网友说通过dump control file可以看到http://www.itpub.net/thread-1153987-1-1.html)。
933 0
LeetCode(数据库)- 产品销售分析 III
LeetCode(数据库)- 产品销售分析 III
18 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载