首页 > 其他分享 >vue2-props-required必填项

vue2-props-required必填项

时间:2023-07-02 23:22:35浏览次数:33  
标签:count 必填 自定义 required init vue2 props

props的required必填项

<template>
    <div>
        <h5>Count 组件</h5>
        <p>count的值是:{{ count }}</p>
        <button @click="add">+1</button>
    </div>
</template>

<script>
export default {
    // props是自定义属性,允许使用者通过自定义属性,为当前组件指定初始值
    // 自定义属性的名字,是封装者自定义的(只要名称合法即可)
    // props中的数据,可以直接在模板结构中使用
    // 注意:props是只读的,不要直接修改 props的值,否则终端会报错!
    // props: ['init'],
    props: {
        'init': {
            // 如果外界使用 Count 组件的时候,没有传递 init 属性,则默认值生效
            default: 0,
            // init的值类型必须是Number数字
            type: Number,
            // 必填项校验
            required: true
        }
    },
    name: "Count",
    data() {
        return {
            count: this.init
        }
    },
    methods: {
        add() {
            this.count += 1
        }
    }
}
</script>

<style lang="less">

</style>

标签:count,必填,自定义,required,init,vue2,props
From: https://www.cnblogs.com/yang-young-young/p/17521665.html

相关文章

  • vue2-props-type值类型
    在声明自定义属性时,可以通过type来定义属性的值类型。示例代码如下:<template><div><h5>Count组件</h5><p>count的值是:{{count}}</p><button@click="add">+1</button></div></template>&......
  • vue2 input和select无法正常回显
    背景:使用vue进行对象赋值,如果是一个未在data声明的属性,会导致双向绑定无法正常回显。<template><div><div><labelfor="">姓名</label><inputv-model="info.name"type="text"></div><div>......
  • uni.app 给大家推荐一个 非常牛的 插件 上传图片 上传 word 上传xlsx 上传pdf
     插件地址地址:https://ext.dcloud.net.cn/plugin?name=lsj-upload兼容vue2 vue3微信小程序 等等等等图片放在下面了使用方法里面有介绍又到了码农 最重要的时刻了ctrlc  ctrlv  大法   ......
  • uni.app上传图片/上传七牛云 vue2 es6
    uni.app上传图片可以使用uni.app里面的api//uni.chooseImage({ // success:(chooseImageRes)=>{ // consttempFilePaths=chooseImageRes.tempFilePaths; // uni.uploadFile({ // url:that.$unishow+'/common/upload',//仅为示例,非真实的接口地......
  • uni.app上传视频vue2 es6
    上传视频可以使用uni.app里面的api letself=this; uni.chooseVideo({ count:1, sourceType:['camera','album'], success:function(res){ console.log(res) self.showVideo=true self.addVideo=false self.src=......
  • 如何解决uni-app上传图片提示打包未添加Camera模块? uni.app es6 vue2
       可以在manifest.json来进行配置  这样就解决了 ......
  • Java 事务管理@Transactional注解rollbackFor回滚属性,事务的传播行为propagation(REQUI
    事务管理Java事务管理@Transactional注解rollbackFor属性所有的异常都回滚;事务的传播行为propagation(REQUIRED,REQUIRES_NEW)01.事务是一组操作的集合,它是一个不可分割的工作单位。事务会把所有的操作作为一个整体,一起向数据库提交或者是撤销操作请求。所以这组操作要么同时......
  • tinymce富文本编辑器在vue2使用
    参考https://blog.csdn.net/LJJONESEED/article/details/1278630201.下载[email protected]@tinymce/[email protected].在node_modules中找到tinymce模块下的skins文件夹、jquery.tinymce.js和jquery.tinymce.mini.js这三个文件夹。3.在public中新建tinymce文件......
  • 图书商城项目练习①管理后台Vue2/ElementUI
    本系列文章是为学习Vue的项目练习笔记,尽量详细记录一下一个完整项目的开发过程。面向初学者,本人也是初学者,搬砖技术还不成熟。项目在技术上前端为主,包含一些后端代码,从基础的数据库(Sqlite)、到后端服务Node.js(Express),再到Web端的Vue,包含服务端、管理后台、商城网站、小程序/App,分......
  • vue2+element-ui国际化实战不刷新页面
    背景有的时候我们做的项目需要支持中英文切换,那么我们就需要使用到vue-i18n插件步骤安装以及挂载安装vue-i18n依赖npmivue-i18n@8在src同级的目录下创建language文件下,在language文件夹下新增3个文件(index.js,en.js,zh.js)index.jsimportVuefrom"vue";importVu......