对应文档节点: https://vuefe.cn/v2/guide/components.html#Customizing-Component-v-model

<body>

    <div id="app">

        <label>父节点</label>

        <input type='checkbox' v-model='enable'>

        <br/>

        <label>子节点</label>

        <!--以下两种方式效果一致-->

        <input-checkbox v-model='enable'></input-checkbox>

        </input-checkbox>

        <!--<input-checkbox :checked="enable" @change="updateValue">

        </input-checkbox>-->

    </div>

</body>

<script>

    Vue.component('input-checkbox', {

        // 声明 props

        model: {

            prop: 'checked',

            event: 'change'

        },

        props: ['checked'],

        template: `

            <span>

            <input

                type='checkbox'

                v-bind:checked="checked"

                v-on:change="updateValue($event.target.checked)">

            </span>

        `,

        methods: {

            updateValue: function (value) {

                //debugger

                this.$emit('change', value)

            }

        }

    });

    new Vue({

        el: "#app",

        data: {

            enable: true

        },

        methods: {

            updateValue: function (value) {

                //debugger

                this.enable = value;

            }

        }

    });

</script>

Vue-[v-model]理解示例的更多相关文章

  1. #error#优化#Model#理解下面这句话错误所导致的错误:"传入一个对象,那么你就拥有了对象的属性"2

    CHENYILONG Blog #error#优化#Model#理解下面这句话错误所导致的错误:"传入一个对象,那么你就拥有了对象的属性"2 © chenyilong. Power ...

  2. 沉淀，再出发：VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  3. 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...

  4. 关于P,V操作理解的突破，关于并发设计与并行

    今天又找了一篇博客研究P,V操作.. 发现..它有一个变量没有声明.. 我就换了篇博客..http://c.biancheng.net/cpp/html/2600.html 然后就看懂了.. 关键突破 ...

  5. 关于P,V操作理解的分析

      P-V操作定义: 假设sem是个整型变量. P原语的主要操作是: (1)sem减1: (2)若sem减1后仍大于或等于零,则该进程继续执行: (3)若sem减1后小于零,则该进程被阻塞,在相应队列 ...

  6. vue props的理解

    vue用了这么久,今天发现父子组件还是傻傻的分不清,不过还好,今天终于搞懂了 vue中到底什么是父组件,什么是子组件 vue之props父子组件之间的谈话 简单的理解就是:使用的地方是父组件,定义的地 ...

  7. Vue.js使用-组件示例（实现数据的CRUD）

    1.业务场景 用户(姓名,年龄,性别)的增删改查 2.数据格式 定义字段,name:字段名称,iskey:是否主键(添加,修改数据标志),dataSource:可选列表(下拉框选项) columns: ...

  8. Vue渲染数据理解以及Vue指令

    一.Vue渲染数据原理 原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏 ...

  9. vue nextTick深入理解－vue性能优化、DOM更新时机、事件循环机制

    一.定义［nextTick.事件循环］ nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...

随机推荐

  1. Android学习之 adb被占用解决办法

    1.adb被占用解决办法 方法一:(1)查看5037端口哪个进程在用          netstat -a -o 5037 (2)查看上面进程是哪个执行文件在占用          tasklist ...

  2. 爬虫开发9.scrapy框架之递归解析和post请求

    今日概要 递归爬取解析多页页面数据 scrapy核心组件工作流程 scrapy的post请求发送 今日详情 1.递归爬取解析多页页面数据 - 需求:将糗事百科所有页码的作者和段子内容数据进行爬取切持久 ...

  3. linux kvm虚拟机安装

    1.上传ISO文件,这里采用OEL5.8x64iso 2.开始安装OEL5.8 (1)raw格式磁盘 virt- --vcpus= --disk path=/data/test02.img,size= ...

  4. php面试题汇集2

    1.实现中文字符串截取无乱码方法 开启mbstring扩展,然后自定义函数: <?php header('content-Type:text/html:charset=utf-8'); func ...

  5. centos下部署NFS

        一. NFS简介   NFS---Network File System:主要功能是通过网络让不同的linux主机系统间可以彼此共享文件和目录.NFS客户端可以通过挂载的方式将NFS服务器端共 ...

  6. 正则表达式 python

    下面这种方式 从结果上看 匹配的是关键字, 但是不是 每一次都可以 100% 准确 search_words_dict = { "肠炎宁": 0, "维生素AD" ...

  7. 0、PlayGround可视化

    Tensorflow新手通过PlayGround可视化初识神经网络 是不是觉得神经网络不够形象,概念不够清晰,如果你是新手,来玩玩PlayGround就知道,大神请绕道. PlayGround是一个在 ...

  8. 洛谷 P4248 / loj 2377 [AHOI2013] 差异 题解【后缀自动机】【树形DP】

    可能是一个 SAM 常用技巧?感觉 SAM 的基础题好多啊.. 题目描述 给定一个长度为 \(n\) 的字符串 \(S\) ,令 \(T_i\) 表示它从第 \(i\) 个字符开始的后缀,求: \[ ...

  9. [转] vagrant学习笔记 - provision

    [From]  https://blog.csdn.net/54powerman/article/details/50684844 从字面上来看,provision是准备,实现的功能是在原生镜像的基础 ...

  10. ORACLE MERGE INTO UPDATE DELETE 用法

    ORACLE MERGE INTO UPDATE DELETE 用法 使用该MERGE语句从一个或多个源中选择行以进行更新或插入表或视图.您可以指定条件以确定是更新还是插入目标表或视图. 此语句是组合 ...