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,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
随机推荐
- 双态运维分享之：业务场景驱动的服务型CMDB
最近这几年,国内外CMDB失败的案例比比皆是,成功的寥寥可数,有人质疑CMDB is dead?但各种业务场景表明,当下数据中心运维,CMDB依然是不可或缺的一部分,它承载着运维的基础,掌握运维的命脉 ...
- 构造HTTP请求Header实现“伪造来源IP”（转）
原文:http://zhangxugg-163-com.iteye.com/blog/1663687 构造 HTTP请求 Header 实现“伪造来源 IP ” 在阅读本文前,大家要有一个概念,在实现 ...
- Shell特殊变量介绍与实践 $0
2.$0特殊变量的作用及变量实践$0的作用为取出执行脚本的名称(包括路径) ,下面是该功能的实践.范例4-4:获取脚本的名称及路径. [root@salt-client- sh1]# cat n1.s ...
- centos samba/squid 配置 samba配置 smbclient mount fstab自动挂载samba curl -xlocalhost:3128 www.qq.com squid配置 3128 DNSPOD 第二十七节课
centos samba/squid 配置 samba配置 smbclient mount fstab自动挂载samba curl -xlocalhost:3128 www.qq.com squ ...
- centos 特殊权限 各种搜索命令 lsattr ,chattr,suid,sgid,sbit,file,type是否是内置命令,stat文件属性 ,whereis,locate,find,ln 内部命令和外部命令 第五节课
centos 特殊权限 各种搜索命令 lsattr ,chattr,suid,sgid,sbit,file,type是否是内置命令,stat文件属性 ,whereis,locate,find,ln ...
- Spark的RDD原理以及2.0特性的介绍
转载自:http://www.tuicool.com/articles/7VNfyif 王联辉,曾在腾讯,Intel 等公司从事大数据相关的工作.2013 年 - 2016 年先后负责腾讯 Yarn ...
- E题:Water Problem(快速幂模板)
题目大意:原题链接 题解链接 解题思路:令x=x-1代入原等式得到新的等式,两式相加,将sin()部分抵消掉,得到只含有f(x)的状态转移方程f(x+1)=f(x)+f(x-2)+f(x-3),然后 ...
- Redis 监控方案
一.概述 近些天,遇到Redis监控的应用场景,从网上搜罗了一些文章,做了整理. 二.工具列表 2.1 redis-faina 见参考文章1 2.2 redis-live 见参考文章1 2.3 red ...
- ACM ICPC, JUST Collegiate Programming Contest (2018) Solution
A:Zero Array 题意:两种操作, 1 p v 将第p个位置的值改成v 2 查询最少的操作数使得所有数都变为0 操作为可以从原序列中选一个非0的数使得所有非0的数减去它,并且所有数不能 ...
- jmeter命令行运行与生成报告
一. 使用命令行方式运行Jmeter 1.1 为什么 使用GUI方式启动jmeter,运行线程较多的测试时,会造成内存和CPU的大量消耗,导致客户机卡死. 所以正确的打开方式是在GUI模式下调 ...