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,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
随机推荐
- Python3、Unicode、UTF-8、编码
text = u'你好,今天天气不错' text print(text) text = '\u4f60\u597d\uff0c\u4eca\u5929\u5929\u6c14\u4e0d\u9519' ...
- Warm up---hdu4612（缩点，树的直径）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4612 给一个无向图, 加上一条边后,求桥最少有几个: 那我们加的那条边的两个顶点u,v:一定是u,v之 ...
- 【查看】mysql 常规书写注意事项（那些坑）
mysql 常规书写注意事项,mysql注意事项 1. 注释: -- 后面一定要加一个空格,否则会报错 2.注释:/*! content */ 在mysql中是会执行的,但是其他数据库不会. 例 ...
- IQKeyboardManager第三方库的使用
IQKeyboardManager是iOS中解决键盘弹起遮挡UITextField/UITextView的一种很实用的工具.无需输入任何代码,不需要额外的设置.使用IQKeyboardManager的 ...
- 华硕主板M2N-电源跳线怎么接
华硕主板M2N 详细参数 http://detail.zol.com.cn/91/90618/param.shtml 电源跳线的连接方法:1.把所有排线理在一起,根据上面的标注,先来明确每根线的定义: ...
- pssh批量远程管理工具
Linux下批量管理工具pssh使用记录 pssh是一款开源的软件,使用python实现,用于批量ssh操作大批量机器:pssh是一个可以在多台服务器上执行命令的工具,同时支持拷贝文件,是同类工具 ...
- C++中定义NULL的头文件
NULL不是C语言基本类型,其定义在stddef.h文件中,作为最基本的语言依赖宏存在.但是随着C/C++的发展,很多文件只要涉及了系统或者标准操作都会将NULL作为标准宏声明或者包含.所以几乎包含任 ...
- 2017 Benelux Algorithm Programming Contest (BAPC 17) Solution
A - Amsterdam Distance 题意:极坐标系,给出两个点,求最短距离 思路:只有两种方式,取min 第一种,先走到0点,再走到终点 第二种,走到同一半径,再走过去 #include ...
- zw“小数据”理论也碰上了“黑天鹅”
4月上旬,在blog<大数据和高频量化交易 >,我们曾经说过: 实战测试,数据越多,反而会影响精度.目前个人数据分析的一个重点,就是"小"数据.老子<道德经·第六 ...
- python 手动遍历迭代器
想遍历一个可迭代对象中的所有元素,但是却不想使用for 循环 为了手动的遍历可迭代对象,使用next() 函数并在代码中捕获StopIteration 异常.比如,下面的例子手动读取一个文件中的所有行 ...