<!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编游戏系列 之二 图标效果

    原文:WPF编游戏系列 之二 图标效果        本篇将要实现图标的两个效果:1. 显示图标标签,2. 图标模糊效果.在上一篇中提到Image没有HTML <img>的Title属性( ...

  2. XML序例化工具类

    Model: [XmlRoot(ElementName = "root")] public class BookModel { [XmlElement] public string ...

  3. 如何快速生成数据文件（fsutil命令，使用CreateFile和SetEndOfFile API函数，fopen和fseek RTL函数）

    1. fsutil 命令 文件会瞬间生成,因为实际上Windows只是分配了名称.地址和空间给该文件,并没有读写任何文件内容 100M=1024x1024x100 fsutil file create ...

  4. 在 Excel 中如何使用宏示例删除列表中的重复项

    概要:在 Microsoft Excel 中,可以创建宏来删除列表中的重复项.也可以创建宏来比较两个列表,并删除第二个列表中那些也出现在第一个(主)列表中的项目.如果您想将两个列表合并在一起,或者如果 ...

  5. FileHelper

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Win ...

  6. 图像滤镜艺术---Swirl滤镜

    原文:图像滤镜艺术---Swirl滤镜 Swirl Filter Swirl 滤镜是实现图像围绕中心点(cenX,cenY)扭曲旋转的效果,效果图如下: 原图 效果图 代码如下:         // ...

  7. Android零基础入门第11节：简单几步带你飞，运行Android Studio工程

    原文:Android零基础入门第11节:简单几步带你飞,运行Android Studio工程 之前讲过Eclipse环境下的Android虚拟设备的创建和使用,现在既然升级了Android Studi ...

  8. Attention is all you need及其在TTS中的应用Close to Human Quality TTS with Transformer和BERT

    论文地址:Attention is you need 序列编码 深度学习做NLP的方法,基本都是先将句子分词,然后每个词转化为对应的的词向量序列,每个句子都对应的是一个矩阵\(X=(x_1,x_2,. ...

  9. Play Framework 模板里使用注入访问数据层

    从Play2.4开始,推荐使用依赖注入替代静态控制器.因此我们不能像play2.3那样,在模板里直接调用object访问数据层.是的,我们还是可以使用常规方式,通过传参到模板里.不过这样很多时候不方便 ...

  10. 新玩法，CentOS7中LVM通过扩展逻辑卷扩展swap空间

    在我们日常运维工作中,偶尔也会遇到需要扩展swap空间的操作.扩展swap空间的方法很多,现在让我们一起来探讨一下,在LVM下扩展swap空间的方法. 1.查看一下卷组,是否还有空闲空间能用于扩展sw ...