<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <input type="text" v-model="msg">

    <!--v-model一般都是数据属性或者方法里面声明的****-->

    <p>{{ msg }}</p>

    <textarea placeholder="" v-model="msg"></textarea>

    <!--只要绑定了v-model msg都会同时改变-->

    <!--单个复选框-->

    <input type="checkbox" id="checkbox" v-model="checked">

    <label for="checkbox">{{ checked }}</label>

    <!--多个复选框,绑定到同一个数组-->

    <div id='example-3'>

        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

        <label for="jack">Jack</label>

        <input type="checkbox" id="john" value="John" v-model="checkedNames">

        <label for="john">John</label>

        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

        <label for="mike">Mike</label>

        <br>

        <span>Checked names: {{ checkedNames }}</span>

        <br>

        <!--for 和 id 一样的值作用就是 点击页面上的用户名就会自动聚集 跟点击输入框聚焦的效果一样-->

        <label for="username">用户名:</label>

        <!--懒监听-->

        <input type="text" v-model.lazy="msg2" id="username">

        <p>{{msg2}}</p>

        <br>

        <!--单选框  绑定的是父级标签select不是option  所以select额度跟 span里的selected有关联-->

        <div id="example-5">

            <select v-model="selected">

                <option disabled value="">请选择</option>

                <option>A</option>

                <option>B</option>

                <option>C</option>

            </select>

            <span>Selected: {{ selected }}</span>

        </div>

        <!--多选绑定数组-->

        <div id="example-6">

            <select v-model="selected2" multiple style="width: 50px;">

                <option>A</option>

                <option>B</option>

                <option>C</option>

            </select>

            <span>Selected: {{ selected2 }}</span>

        </div>

        <br>

        <!--清除前后空格-->

        <input v-model.trim="msg3">

        <p>{{msg3}}</p>

    </div>

</div>

<script src="vue.js"></script>

<script>

    // v-model 只能应用在 input textarea select标签中

    //双向数据绑定:之前的操作都是数据到view的过程(return 返回的数据给回div里的msg)

    //先有数据到view,更改view,再有反向的

    //一开始return 里面的msg 在加载页面的时候就已经放在了div中显示msg的位置了,有了数据到view的过程

    //更改view就是在input输入框里改输入框的变化,就是修改msg,

    //这时候data中的msg会随着变化, 进而导致<p>里面的msg跟着改变

    new Vue({

        el: "#app",

        data() {

            return {

                msg: "alex",

                msg2:"wusir",

                msg3:"",

                checked: false,

                checkedNames: [],

                selected: "",

                selected2:[],

            }//怎么显示到input的输入框?以前是用过value属性,在vue里value属性会被忽略掉

        }

    })

</script>

</body>

</html>

vue中v-model的数据双向绑定(重要)的更多相关文章

  1. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  2. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  3. Vue之九数据劫持实现MVVM的数据双向绑定

    vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...

  4. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  5. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  6. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  7. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  8. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  9. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  10. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

随机推荐

  1. WPF中的Application类。

    原文:WPF中的Application类. Application对象用的名称空间是system.windows 1.手动创建Application对象步骤. 1.1).把项目中的App.Xaml文件 ...

  2. RHEL 6和RHEL 7（CentOS 6和CentOS 7）恢复ROOT密码

    RedHat 6恢复Root密码: 1.启动RedHat 6的时候在这个界面按任意键 2.出现如下界面,按 e 3.出现如下界面,选择第二个--kernel,然后再按 e 4.出现如下界面,输入 空格 ...

  3. Bootstrap路径导航

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  4. Delphi跨平台Socket通讯库

    盒子中的souledge大侠发布了新的Socket库,以下为原文: 我之前写过一个iocp的框架,放到googlecode上了. 由于当时的delphi版本尚无法跨平台,所以该框架只能运行在Windo ...

  5. WPF后台生成datatemplate（TreeViewItem例子）

    public void loadCheckListDataTemplate(TreeViewItem tvi) { DataTemplate cdt = new DataTemplate(); Fra ...

  6. 龙芯GO！龙芯平台上构建Go语言环境指南

    龙芯软件生态系列——龙芯GO!龙芯平台上构建Go语言环境指南2016-07-05 龙芯中科1初识Go语言Go语言是Google公司于2009年正式推出的一款开源的编程语言,是由Robert Gries ...

  7. Redis简介和安装

    Redis介绍 Redis是一种Key-Value存储系统(数据库),其提供了一组丰富的数据结构,如List,Sets,Hashes和Ordered Sets Redis安装 wget <Red ...

  8. 解决C/C++程序执行一闪而过的方法（使用getchar，或者cin.get，不推荐system(“pause”)）

    简述 在VS编写控制台程序的时候,包括使用其他IDE(Visual C++)编写C/C++程序,经常会看到程序的执行结果一闪而过,要解决这个问题,可以在代码的最后加上system(“pause”).g ...

  9. REDM基础教程1-下载、编译代码

    1.下载DM REDM的更新路径目前有两个,同步更新,可使用SVN或GIT下载对应代码 https://git.oschina.net/hgy413/REDM https://github.com/h ...

  10. qt 心跳设计

    网络通信中的心跳设计是为了判断客户端和服务器通信是socket是否处于连接状态,服务端每隔一个固定的时间间隔给客户端放消息,客户端设计一个心跳类,类中有一个定时器,当socket接收到信息时,心跳类记 ...