<!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. 图形化界面安装oracle报错Could not execute auto check for display colors using command /usr/bin/xdpyinfo. Check if the DISPLAY variable is set.

    问题描述: 在Linux + oracle 安装时,采有root 帐号登录x-windows 界面,然后 $su oracle 登录录安装Oracle 报以下错误: >>> Coul ...

  2. style原则问题

    就近原则 1.“行内”覆盖“嵌入”,“嵌入”覆盖“外部”Style.xml <Window.Resources> <Grid.Resources> ….中间层 <Butt ...

  3. JS 输入框为空的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. WM_SIZE后于WM_CREATE消息!!在窗口被创建时的顺序!

    WM_SIZE   procedure WMSize (var Message: TWMSize); message WM_SIZE; 参数说明 wParam: Specifies the type ...

  5. 图像滤镜艺术---球面(Spherize)滤镜

    原文:图像滤镜艺术---球面(Spherize)滤镜 球面(Spherize)滤镜 球面滤镜是通过极坐标变换实现图像的球面特效. 代码如下:         //         ///        ...

  6. Socket进阶篇

    Socket简介 1,socket是什么? 2,socket的作用 3,socket怎么用 4,socket的扩展 ——————————————————- socket是什么? Socket这个名词现 ...

  7. NULL指针区域（NULL定义为0-65535之间的任何数都可以）

    NULL指针区域0x00000000-0x0000FFFF:65535字节 这个区域的作用是用来帮助程序员发现内存分配失败后未检查就使用的错误.比如使用malloc分配内存失败,返回NULL,而又未做 ...

  8. ReportViewer，RDLC 报表开发之个性化样式

    原文:ReportViewer,RDLC 报表开发之个性化样式 报表开发中,客户对样式提出了要求: 1.工具栏上显示每页条数 2.只导出Excel,不需要下拉菜单. 3.报表上显示的图表,分页时,每页 ...

  9. ThinkPHP 提供Auth 权限管理、支付宝、微信支付、阿里oss、友盟推送、融云即时通讯、云通讯短信、Email、Excel、PDF 等等

    多功能 THinkPHP 开源框架 项目简介:使用 THinkPHP 开发项目的过程中把一些常用的功能或者第三方 sdk 整合好,开源供亲们参考,如 Auth 权限管理.支付宝.微信支付.阿里oss. ...

  10. c#自定义业务锁

    我们有这样的使用场景,某个订单在修改信息的时候,其他人不能修改相关的信息,比如不能做支付,不能退单等等,那么我们可以根据单号进行加锁,多Monitor做了如下扩展 定义接口 //// 文件名称:ILo ...