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,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
随机推荐
- Andrew Ng机器学习公开课笔记 -- Logistic Regression
网易公开课,第3,4课 notes,http://cs229.stanford.edu/notes/cs229-notes1.pdf 前面讨论了线性回归问题, 符合高斯分布,使用最小二乘来作为损失函数 ...
- 约会安排---hdu4553（线段树，麻烦的区间覆盖）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4553 算是poj3667的加强版,建立两颗线段树,一个是DS区间,另一个是NS区间.那么根据题意, ...
- 巧用Salt，实现CMDB配置自动发现
随着互联网+新形势的发展,越来越多的企业步入双态(稳敏双态)IT时代,信息化环境越来越复杂,既有IOE三层架构,也有VCE.Openstack等云虚拟化架构和互联网化的分布式大数据架构.所以,企业急需 ...
- python修改镜像源
pip升级:python -m pip install --upgrade pip https://www.cnblogs.com/andy9468/p/10319442.html 1.在命令中临时修 ...
- Linux下Rsync+Inotify-tools实现数据实时同步
Linux下Rsync+Inotify-tools实现数据实时同步 注意:下面的三个案例都是rsync 每次都是全量的同步(这就坑爹了),而且 file列表是循环形式触发rsync ,等于有10个文件 ...
- PAT 1139 First Contact[难][模拟]
1139 First Contact(30 分) Unlike in nowadays, the way that boys and girls expressing their feelings o ...
- react分享
后台项目应用分享 后台项目应用分享 webpack + react + redux + antd 后台项目应用分享 策略篇 框架选择 组件化开发 组件?组件! CSS in JS下的样式开发思路 展示 ...
- array2xml xml2array
array2xml/** * * 将简单数组转化为简单的xml * @param string $data 要进行转化的数组 * @param string $tag ...
- http之请求方法
根据HTTP标准,HTTP请求可以使用多种请求方法.HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法.HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE ...
- onsubmit不起作用的原因
使用form表单,添加onsubmit="return check()",来实现提交前进行相关验证功能时,有时会出现js函数不起作用的情况, 此时可以检查相应的js函数check( ...