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的招式.内功是根基.是基础,决定了武学修为境界的高低,招式也许就是明心见性之后的修行.修为指一个人的修养.素质.道德.涵养. ...
- 小米范工具系列之十：小米范SSH批量命令执行工具
小米范SSH批量命令执行工具的主要功能是自动登录多台机器,并执行指定的命令,比如批量抓取shadow.批量获取系统版本.或者做基线时批量抓取配置等. 此工具使用java 1.8以上版本运行. 界面如下 ...
- Web开发：URL编码与解码（转）
原文:http://www.cnblogs.com/greatverve/archive/2011/12/12/URL-Encoding-Decoding.html 通常如果一样东西需要编码,说明这样 ...
- java-mybaits-00701-与spring整合
1.1 整合思路 需要spring通过单例方式管理SqlSessionFactory. spring和mybatis整合生成代理对象,使用SqlSessionFactory创建SqlSes ...
- JAVA优化技巧分享 让游戏更加的流畅
我的世界怎么样可以玩的更加流畅呢?怎么对游戏进行优化呢?相信很多小伙伴都很想知道吧,今天小编为大家带来的是我的世界游戏优化技巧,喜欢的小伙伴不要错 ... 在很多时候如果电脑配置过低的话,玩游戏并不流 ...
- Eclipse中如何查看使用的JDK版本
有两种方法可以查看eclipse中jdk的版本: 第一种方法: 点击开始--运行--输入cmd--点击确定--在cmd命令行窗口中输入java -version,就可以显示出当前在使用的jdk的版本号 ...
- laravel + html ajax 多表单字段和图片一起上传
$("#article_push").on('click', function (e){ e.preventDefault(); var stylestr = $('#summer ...
- 20145326《Java程序设计》第二周学习总结
20145326<Java程序设计>第二周学习总结 教材学习内容总结 本周学习教材第三章,本章主要讲述了java语言中的一些基础语法,java是个支持面向对象的程序语言,但在正式进入面向对 ...
- ZLYD团队第5周项目总结
ZLYD团队第5周项目总结 项目进展 目前游戏人没有成功运行.初步判断是部分代码有误. 我们采用了两种运行方式,代码未出现明确错误.但问题可能是由于版本问题. 将Wall.java.Gold.java ...
- LSB含义
LSB(Least Significant Bit)最低有效位,对任何AD来说,量化后输出的数字信号值都是以1LSB的电压值步进的,介于1LSB之间的电压将按照一定的规则进行入位或舍弃,这个过程中造成 ...