vue.js使用v-model指令实现的数据双向绑定功能示例

本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能。分享给大家供大家参考，具体如下：

vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍：

v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如：

app.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>
  vuejs v-model 数据双向绑定
  </title>
  <style type="text/css">
    [v-cloak] { display: none }
  </style>
</head>
<body>
  <div id="app">
    <form>
      姓名：
      <input type="text" v-model="data.name" placeholder="姓名"/>
      <br />
      性别：
      <input type="radio" id="one" value="One" v-model="data.sex"/>
      <label for="man">男</label>
      <input type="radio" id="two" value="Two" v-model="data.sex"/>
      <label for="male">女</label>
      <br />
      <input type="checkbox" id="jack" value="book" v-model="data.interest"/>
      <label for="jack">阅读</label>
      <input type="checkbox" id="john" value="swim" v-model="data.interest"/>
      <label for="john">游泳</label>
      <input type="checkbox" id="move" value="game" v-model="data.interest"/>
      <label for="move">游戏</label>
      <input type="checkbox" id="mike" value="song" v-model="data.interest"/>
      <label for="mike">唱歌</label>
      <br />
      身份：
      <select v-model="data.identity">
        <option value="teacher" selected>教师</option>
        <option value="doctor">医生</option>
        <option value="lawyer">律师</option>
      </select>
    </form>
    <p><pre>data: {{$data | json 2}}</pre></p>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
  new Vue({
    el: '#app',
    data: {
      data:{
        name:'',
        sex:'',
        interest:[],
        identity:''
      }
    }
  })
})
</script>
</html>

使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

希望本文所述对大家vue.js程序设计有所帮助。

赞 (0)

相关推荐

  • 轻松实现javascript数据双向绑定

    双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然.换句话说,如果我们有一个user对象,这个对象有一个name属性,无论何时你对user.name设置了一个新值,UI也会展示这个新的值.同样的,如果UI包含一个用于数据用户名字的输入框,输入一个新值也会导致user对象的name属性发生相应的改变. 许多流行的javascript框架,像Ember.js,Angular.js或者KnockoutJS都会把双向数据绑定作为其中的主要特性来宣传.这并不意味着从头开始实现它很难,

  • AngularJS学习笔记（三）数据双向绑定的简单实例

    AngularJS学习笔记（三）数据双向绑定的简单实例

    双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 数据-->视图 这里我们只演示有了数据以后,如何绑定到视图上. <!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandb

  • javascript实现数据双向绑定的三种方式小结

    前端数据的双向绑定方法 前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下.目前实现数据双向绑定主要有以下三种. 1.手动绑定 比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义get和set方法(当然还有其它方法),调用时手动调用get或set数据,改变数据后出发UI层的渲染操作:以视图驱动数据变化的场景主要应用与input.select.textarea等

  • 深入理解Angularjs向指令传递数据双向绑定机制

    下面来先看一个简单例子 <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../bootstrap.min.js"> </

  • Nuxt.js 数据双向绑定的实现

    假定我们有一个需求,一开始通过mounted()将一个字符串渲染在页面上,但是我们经过操作后修改了数据并且需要将得到的结果重新异步渲染到页面中去,而不是跳转刷新页面来重新渲染 首先模板中data()中定义数据,并且要将定义的数据显示出来 <template> <div> <span @click="click">{{ text }}</span> </div> </template> <script>

  • JS原生数据双向绑定实现代码

    JS原生数据双向绑定实现代码

    代码如下: <span style="font-family:Times New Roman;font-size:14px;" deep="7"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <script> fu

  • JS数据双向绑定原理与用法实例分析

    JS数据双向绑定原理与用法实例分析

    本文实例讲述了JS数据双向绑定原理与用法.分享给大家供大家参考,具体如下: 通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title">Hello</h1> <input type="text" id="a" /> 首先是在界面上更改input的值,需要监听input的"input&qu

  • Vue.js每天必学之数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新. 你也可以只处理

  • Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

    表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业务较为常见,比如单选.多选.下拉选择.输入框等,用它们可以完成数据的录入.校验.提交等. Vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上. 例如下面的例子: <div id="app"> <input type="text" v-mo

  • vue.js使用v-model指令实现的数据双向绑定功能示例

    vue.js使用v-model指令实现的数据双向绑定功能示例

    本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能.分享给大家供大家参考,具体如下: vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过

  • vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    本文实例讲述了vue.js使用v-model实现表单元素(input) 双向数据绑定功能.分享给大家供大家参考,具体如下: v-model 一般表单元素(input) 双向数据绑定 el:'#box',//这里放的是选择器. 不然会不生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vu

  • vue用Object.defineProperty手写一个简单的双向绑定的示例

    vue用Object.defineProperty手写一个简单的双向绑定的示例

    前言 上次写了一个Object.defineProperty() 不详解,文末说要写用它来写个双向绑定.说话算话,说来就来 前文链接 Object.defineProperty() 不详解 先看最后效果 model演示.gif 什么是双向绑定? 1.当一个对象(或变量)的属性改变,那么调用这个属性的地方显示也应该改变,模型到视图(model => view) 2.当调用属性的这个地方改变了这个属性(通常是一个表单元素),那么这个对象(或变量)的属性也会改为最新的值 ,即视图到模型(view =>

  • 用vue.js组件模拟v-model指令实例方法

    1.问题描述 在使用v-model指令实现输入框数据双向绑定,输入值时对应的这个变量的值也随着变化:但是这里不允许使用v-model,需要写一个组件实现v-model指令效果 <div id="user"> <input type="text" v-model="username"> <label>{{username}}</label> </div> <script> le

  • vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

    最近看到有些人说vue是双向数据绑定的,有些人说vue是单向数据流的,我认为这两种说法都是错误的,vue是一款具有响应式更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定. 2 单向数据流与数据双向绑定 单向数据流是指model中的数据发生改变时引起view的改变. 双向数据绑定是指model中的数据发生改变时view的改变,view的改变也会引起model的改变. //这个是单向数据流,改变这个input的value值并不能是data中的text属性发生改变. <input type

  • 浅谈vue中数据双向绑定的实现原理

    浅谈vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Object.defineProperty() * 对对象的属性进行 定义/修改 * */ let obj = {x:10} // 这两种方式都相对来说比较简单,直接,但是有些时候我们需要对对象的属性的修改和增加进行必要的干预 // obj.y = 20; // obj.x = 100; // obj.x =

  • 利用js实现Vue2.0中数据的双向绑定功能

    利用js实现Vue2.0中数据的双向绑定功能

    Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj  要定义属性的对象. prop 要定义或修改的属性的名称 descriptor 要定义或修改的属性描述符 obj和prop很好理解 比如我们定义一个变量为 const o = { name:'xbhog' } 其中obj指的就是o,prop指的就是o.name 下面我们主要看看descriptor descriptor  目标对象属性的一些特征

  • vue.js语法及常用指令

    Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同

  • Vue.js 中的 v-cloak 指令及使用详解

    先来看下vue.js 中的v-cloak 指令 可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码.我们可以使用 v-cloak 指令来解决这一问题. html: <div id="app"> {{context}} </div> js: <script> var app = new

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

随机推荐