<!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. jquery mobile 笔记

    1.navbar 相关 <nav data-role="navbar">    <ul>      <li><a href="# ...

  2. 简历上的哪些内容才是 HR 眼中的干货？

    资源业绩能力知识自评 https://www.zhihu.com/question/39722495/answer/199846861

  3. 1-5-vim编辑器的使用

      第1章 vim主要模式介绍,vim命令模式. 1.1 确保系统已经安装了VIM工具 [root@panda ~]# rpm -qf `which vim` [root@panda ~]# rpm ...

  4. WPF 界面实现多语言支持 中英文切换 动态加载资源字典

    1.使用资源字典,首先新建两个字典文件en-us.xaml.zh-cn.xaml.定义中英文的字符串在这里面[注意:添加xmlns:s="clr-namespace:System;assem ...

  5. MVC CRUD 的两种方法

    //Index.cshtml @model IQueryable<MvcExam2.Models.Product>@{    Layout = null;}<!DOCTYPE htm ...

  6. 数据绑定（二）把控件作为Binding源

    原文:数据绑定(二)把控件作为Binding源 下面的代码把一个TextBox的Text属性关联在了Slider的Value属性上 <Window x:Class="WpfApplic ...

  7. SDP开发平台试用版上线！提供源码！！！！

    SDP开发平台提供试用版!! SDP软件快速开发平台是一套面向对象的应用软件快速开发平台. 1.SDP 设计端--页面设计 通过简单的拖拉控件,或者快速生成控件,可以在几分钟快速制作一个页面:如图 通 ...

  8. 【Python】wifi开关测试

    #!/usr/bin/python # -*- coding: UTF-8 -*- import os import time def find_device(): os.system('adb ki ...

  9. win10中使用sqlserver2008r2 SQL Server 配置管理器

    原文:win10中使用sqlserver2008r2 SQL Server 配置管理器 使用 Windows10 访问 SQL Server 配置管理器 因为 SQL Server 配置管理器是 Mi ...

  10. mysql索引创建&查看&删除

    1．索引作用 在索引列上,除了上面提到的有序查找之外,数据库利用各种各样的快速定位技术,能够大大提高查询效率.特别是当数据量非常大,查询涉及多个表时,使用索引往往能使查询速度加快成千上万倍. 例如,有 ...