文档章节

[Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

o
 osc_pn11u1x9
发布于 2018/08/08 01:48
字数 193
阅读 21
收藏 0

精选30+云产品,助力企业轻松上云!>>>

Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as forms. This lesson shows how to use it by creating a custom checkbox component using the @Model decorator in TypeScript.

 

When using the v-model, the custom component will receive 'value' prop from the parent component. If we also want to pass ':value' to the custom component, we need to use  '@Model('change') propName'.

v-model will also received 'change' event for components communcation.

 

Checkbox:

<template>
  <div>
      <input type="checkbox" :id="id" :checked=checked @change="changed"/> {{label}}
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop, Model } from 'vue-property-decorator'
@Component
export default class MyCheckbox extends Vue {
  @Prop() label: string
  @Prop() id: string

  @Prop()
  @Model('change') checked: boolean

  changed(ev) {
    this.$emit('change', ev.target.checked)
  }
}
</script>

 

Parent Component:

<template>
    <div>
        <MyCheckbox :label="checkbox.label" :id="checkbox.id" v-model="checkbox.checked"/>

        {{JSON.stringify(checkbox)}}
    </div>
</template>
<script lang="ts">

import Vue from 'vue'
import {Component} from 'vue-property-decorator'
import MyCheckbox from './MyCheckBox.vue'

@Component({
    components: {
        MyCheckbox
    }
})
export default class HelloTs extends Vue {

    checkbox = {
        label: 'Fancy checkbox',
        id: 'checkbox-id',
        checked: true
    }
}
</script>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue + typescript

vue + typescript 以下过程基于vue2.XX,如果使用vue-cli3以上版本,请忽略该过程,不需要配置。。。。直接翻到最后,了解在项目中使用上的出入 安排:+ 安装vue-cli+ 安装ts依赖+ 配置 webp...

小小费FF
05/18
1
0
在Vue中使用TypeScript

TypeScript基础学习 初始化TS项目 Vue装饰器 vue-typescript-admin框架 1、TypeScript基础学习 2、初始化TS项目 3、Vue装饰器 Vue装饰器常用的有下面几个: vue-class-component : 强化 Vue ...

osc_ppbkovyk
2019/11/13
24
0
Vue2.5+ + webpack + TypeScript脚手架

Vue-Webpack-TypeScript 这是一个Vue2.5+版本兼容TypeScript开发的脚手架,虽然Vue3.0马上就要来了,但是我们还是可以用目前的版本练练手。目前这个是配好没多久的脚手架,也许会有一下问题,...

Jacky_MYD
2019/01/22
0
0
vue系列之vue cli 3引入ts

<h1>插件</h1><a href="http://www.jqhtml.com/26285.html" target="_blank">Vue2.5+ Typescript 引入全面指南</a><ol><li><a href="https://github.com/vuejs/vue-class-component" rel="n......

osc_gssohi23
2018/12/15
15
0
TypeScript从入门到Vue项目迁移

前言 ES6的普及,大大简化了JavaScript的表达方式 大型项目中,js没有类型检查、表达方式灵活,多人协作代码调试和维护成本高 2. 定义 是 的一个超集,而且本质上向这个语言添加了可选的静态...

osc_2h38v7rr
2019/08/06
13
0

没有更多内容

加载失败,请刷新页面

加载更多

深入浅出Zabbix 3.0 -- 第二章 Zabbix Web操作与定义

第二章 Zabbix Web操作与定义 本章介绍Zabbix 中一些基本概念的定义和web前端页面的操作,包括Zabbix中使用的一些术语的定义,Web页面中用户管理、主机和主机组的管理,以及监控项、模板、触...

osc_5zaxkz1e
20分钟前
14
0
深入浅出Zabbix 3.0 -- 第一章 Zabbix 安装与配置

第一章 Zabbix 安装与配置 1.1 Zabbix 介绍 Zabbix是一个企业级的开源监控软件,可以监控IT基础架构的可用性和应用的性能,为用户提供集中管理、分布式监控的一站式(all in one)监控解决方...

osc_nvkeo9cj
21分钟前
10
0
PHP 实现抽奖逻辑

public static function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); //概率数组循环 forea......

chenhongjiang
21分钟前
18
0
struts2 上传 下载

东方部落: http://11144439.blog.51cto.com struts中上传文件功能小测试。这里jar是 2.5 版本。 项目结构图 废话不多说,直接代码。 2. web.xml配置 <?xml version="1.0" encoding="UTF-8......

osc_1qix3fyb
23分钟前
31
0
SVN管理系统安装及其操作

SVN管理系统安装及操作 防伪码:学习永远不晚! 前言: SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS、CVS,它采用了分支管理系统,它的设计目标就是取代CVS。互联网上...

osc_afifi2qt
24分钟前
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部