041——VUE中组件之pros数据的多种验证机制实例详解
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>组件之pros数据的多种验证机制实例详解</title>
<script src="vue.js"></script>
</head> <body>
<div id="hdcms">
<hd-news :show-del-button="true"></hd-news >
<!--<hd-news :show-del-button="1" ></hd-news >--> </div>
<script typeof="text/x-template" id="hdNews">
<div>
<li v-for="(v,k) in lists">
{{v.title}}
<button v-if="showDelButton">刪除</button>
</li>
</div>
</script>
<script>
var hdNews = {
template: "#hdNews",
props: {
showDelButton:{
type:[Boolean,Number], //规定此数据必须是Boolean或Number类型
required:true //规定此数据必须填写
}, /* showDelButton:{
validator(v){
return v===1||v===0; //值必须是1或0
}
},*/
lists:{
type:Array,
default(){
return [{title:'科技兴国'}] //规定此数据的默认值
}
} },
data() {
return {};
}
};
new Vue({
el: "#hdcms", //根组件，其他的就是子组件
//定义局部组件：
components: {
hdNews
},
data: {
news:[
{title:'hdcms'},
{title:'hdphp'},
{title:'hdphpHtml'}
]
}
});
</script> </body> </html>
041——VUE中组件之pros数据的多种验证机制实例详解的更多相关文章
- vue的父子组件间的相互传参props及props数据的多种验证机制
感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马...时间会告诉我们是好是坏 好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧 ------ ...
- 040——VUE中组件之组件间的数据参props的使用实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中组件
0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...
- vue中组件之间的通信
一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式 props vue自定义的事件 消息订阅与发布 vuex sl ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- Vue中组件化编码使用（实战练习一）
Vue中组件化编码的大致流程(初接触).组件之间的参数传递(最基础的形式).组件之间的配合完成一个需求 1.在Vue中进行组件化编码 1.1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆 ...
- 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function
解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...
- 去掉vue 中的代码规范检测（Eslint验证）
去掉vue 中的代码规范检测(Eslint验证): 1.在搭建vue脚手架时提示是否启用eslint检测的. Use ESLint to lint your code? 写 no; 2.如果项目已经生 ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
随机推荐
- 项目无法运行iPhone5模拟器
公司没有iPhone5真机, 有人反馈iPhone5有bug, 只能用模拟器验证bug, 但是使用iPhone5项目编译不过,报错: 注释掉相关引用代码,去掉 库
- 循环链表的实现与操作(C语言实现)
循环链表是还有一种形式的链式存贮结构.它的特点是表中最后一个结点的指针域指向头结点,整个链表形成一个环. 循环链表的操作 1,循环链表的新操作 2, 获取当前游标指向的数据元素 3, 将游标重置指向链 ...
- 用SQL语句检查CPU和磁盘空间
--查看4小时内的CPU变化值,1分钟统计一次 DECLARE @ts_now BIGINT; SELECT @ts_now = ms_ticks FROM sys.dm_os_sys_info; - ...
- OpenCV Windows7 VC6.0安装以及HelloWorld
anna在实验室配置OpenCV的时候,按照中文网站的介绍,很顺利的就完成了.可是回到家情况就大不一样!!总是在链接的时候报错,不是少这个lib就是少那个lib大哭最后查明是anna马虎,忘了将C:\ ...
- Amber安装并行
现在简单介绍一下amber12中安装openmpi并行的过程. 1. 下载openmpi版本在1.5-1.9之间的(openmpi-1.6.5.tar.bz2) 这是因为$AMBERHOME/Ambe ...
- 装饰器的修复wraps,偏函数partial 以及chain
将被装饰的函数的一些属性值赋值给 装饰器函数,最终让属性的显示更符合我们的直觉. from functools import wraps def wapper(func): @wraps(func) ...
- （15）如何使用Cocos2d-x 3.0制作基于tilemap的游戏：第三部分（完）
引言 程序截图: 在第二部分教程中,Ray教大家如何在地图中制作可碰撞的区域,如何使用tile属性,如何制作可以拾取的物品以及如何动态修改地图.如何使用“Heads up display”来显示分数. ...
- cocos代码研究（24）Widget子类PageView学习笔记
理论基础 PageView类又称Layout的管理器,可以让用户在多个Layout之间左右或者上下切换显示,继承自 Layout . 代码实践 static PageView * create ()创 ...
- EF code first:列名 'Discriminator' 无效
使用EF code first编写类继承的时候,出现列名 'Discriminator' 无效 . 字段中没有列名 'Discriminator' 原来在代码中,定义了一个类A,类B,B继承A,但是数 ...
- Codeforces Round #532 (Div. 2) Solution
A. Roman and Browser 签到. #include <bits/stdc++.h> using namespace std; ]; int get(int b) { ]; ...