vue v-model实现数据的双向绑定

<!DOCTYPE html>
<html>
 <meta charset="utf-8">
<head>
    <title></title>
</head>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
    {{msg}}
    <!-- v-bind 只能实现数据的单项绑定-->
    <input type="" name="" :value=‘msg‘>
    <!-- v-bind 只能实现数据的双向绑定只能用在表单元素中 input(radio text address email..) select checkbox textarea-->
    <input type="" name="" v-model=‘msg‘>
</div>
<script type="text/javascript">
  var vm = new Vue({
       el:‘#app‘,
       data:{
           msg:‘abcde‘
       },
       methods:{

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

原文地址:https://www.cnblogs.com/chengfengchi/p/11337272.html

时间: 2024-11-09 10:26:52

vue v-model实现数据的双向绑定的相关文章

vue中如何实现数据的双向绑定

vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this.value;会导致循环调用set方法,所以要借助中间对象的形式把值赋给中间对象,获取obj.name的时候我们获取中间对象的最新值即可 let obj = {name:'zhufeng',age:9};//数据 let temp = {name:"lily"};//借助中间对象 let

vue之v-model表单输入双向绑定

vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V是View的简写,VM就是ViewModel. 单向绑定和双向绑定的区别: 单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新. 有单向绑定,就有双向绑定. 如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向

数据的双向绑定 Angular JS

接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> &

js实现数据的双向绑定

今天用原生js来实现一个数据的双向绑定 知识点:object.defineProperty() 三个参数: 第一个:要定义属性的对象, 第二个:要定义或者修改的属性的名称 第三个:将被定义或者修改的属性的描述 <input type="text" id="inp"/><p id="showText"></p> <script> var obj = {}; Object.defineProperty(

Vue 数据的双向绑定

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 7 </head> 8 <body> 9 <

AnjularJS系列3 —— 数据的双向绑定

第三篇,双向的数据绑定 数据绑定是AnguarJS的特性之一,避免书写大量的初始代码从而节约开发时间 我们想象一下Model是你的应用中的简单事实. 你的Model是你用来读取或者更新的部分.数据绑定指令提供了你的Model投射到view的方法.这些投射可以无缝的,毫不影响的应用到web应用中. 传统来说,当model变化了. 开发人员需要手动处理DOM元素并且将属性反映到这些变化中.这个一个双向的过程. 一方面,model变化驱动了DOM中元素变化, 另一方面,DOM元素的变化也会影响到Mod

深入学习AngularJS中数据的双向绑定机制

来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中,

(十五)在controller之外修改$scope中的数据,双向绑定特性失效,不能自动刷新

在angularjs中通过angular.element(dom).scope()可以拿到某个dom元素关联的作用域,从而可以访问$scope中的属性和方法.但是在ng-controller函数之外修改$scope中的数据,angular的$scope是不会自动刷新的,即双向绑定特性失效. <html> <head> <script src="angular-1.3.15.js"></script> <script> var

vue 组建实现数据的双向绑定

<!DOCTYPE html><html><head> <style>body {  font-family: Helvetica Neue, Arial, sans-serif;  font-size: 14px;  color: #444;} table {  border: 2px solid #42b983;  border-radius: 3px;  background-color: #fff;} th {  background-color: