<!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. C#控制台关闭之前做一些操作

    using System; using System.Runtime.InteropServices; class Program { static void Main(string[] args) ...

  2. WCF的几个注意事项

    wcf托管服务注意的问题 加上项目分为客户端-WCF服务-逻辑层-数据库三层wcf一直出现异常,说没有初始化啊之类的,如果你的逻辑代码确定没有问题的话,思考是不是wcf的配置文件(app.config ...

  3. JS 中click和onclick的区别

    1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 2.click本身是方法,作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件

  4. QWidget继承自QPaintDevice，这样就可以直接把QWidget传入QPainter的构造函数，比如QPainter(mylabel)，然后设置QWidget的长宽后直接进行作画了

    比如用QLabel在主界面上画两条虚线: bool ContentWidget::eventFilter(QObject *obj, QEvent *event) { if(obj == line_l ...

  5. Lexer的设计--中(4)

    设计一个小型的内存池以及链表 上一节撸到万事俱备只欠真正的lex, 但是lex的作用是将源代码转化为Token流, 用什么保存Token? 这就涉及到我们要接触的第一个数据结构-链表, 虽然标准库中很 ...

  6. C#图片灰度处理(位深度24→位深度8),用灰度数组byte[]新建一个8位灰度图像Bitmap 。

    原文:C#图片灰度处理(位深度24→位深度8) #region 灰度处理 /// <summary> /// 将源图像灰度化,并转化为8位灰度图像. /// </summary> ...

  7. stdlib.h，string.h，wchar.h的函数列表（cplusplus.com就有，很清楚）goodx

    Multibyte characters mblen Get length of multibyte character (function ) mbtowc Convert multibyte se ...

  8. 配置 ClientIDMode 控件ID生成规则

    废话不说先例子: <asp:GridView ID="grd" runat="server"AutoGenerateColumns="False ...

  9. BITED数学建模七日谈之一：参加全国大学生数学建模比赛前你需要积累哪些

    大家好,我是数学中国的版主magic2728,非常高兴能够借助数学中国这个平台分享一些自己的经验,帮助大家在国赛的最后备战中能够最后冲刺提高.分享一共分为七个部分,分七天写给大家,下面是第一个部分:参 ...

  10. SpringCloud-分布式配置中心【加密-非对称加密】

    案例代码:https://github.com/q279583842q/springcloud-e-book 非对称加密 一.什么是非对称加密(Asymmetric encryption) 二.Jav ...