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,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
随机推荐
- Python绘图教程
1.二维绘图 a. 一维数据集 用 Numpy ndarray 作为数据传入 ply 1. import numpy as np import matplotlib as mpl import mat ...
- Hotel---poj3667（线段树区间问题）
题目链接:http://poj.org/problem?id=3667 题意:酒店有n个房间,现有m个团队,每个团队需要连续 d 个房间,现在有两个操作,1:需要 d 个房间,2:从 x 开始连续 d ...
- Python开发【Django】：时间处理
时间格式化 做博客后台时,需要经常对数据库里面的时间格式(2017-02-17 02:10:44.308638)进行处理,格式化成自己想要的时间(列如年月日),下面就来记录下如何对时间进行处理 1.时 ...
- Python开发【项目】:博客后台
概述 通过自己写的博客后台代码.思路,来与武sir的代码进行一个差异化的比较,记录之间的差距,改善以后写代码的思路 博客后台这个项目,对之前Django学习的各个知识点都有涉及到,非常重要 用户登录验 ...
- 三个在线django速成教程(转)
add by zhj: 除了这几个在线的,有些书也不错 1. Two Scoops of Django 2. Instant Django 1.5 Application Development St ...
- 一个用于提取简体中文字符串中省，市和区并能够进行映射，检验和简单绘图的python模块
简介 一个用于提取简体中文字符串中省,市和区并能够进行映射,检验和简单绘图的python模块. 举个例子: ["徐汇区虹漕路461号58号楼5楼", "泉州市洛江区万安塘 ...
- git学习------> 解决Gitlab 版本升级之后，发送 merge request 出现 http 500 的返回码错误
今天有同事在Gitlab上发送 Merge Request的时候,直接出现如下所示的界面,提示http 500,服务器内部出错. 一.错误描述 1.1 创建新的 Merge Request 1.2 填 ...
- Windows版本搭建安装React Native环境配置
1 安装Chocolatey 打开cmd黑窗口 @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-obje ...
- 离线状态 Postman不能开启Postman Interceptor解决
目前的postman插件如果想正常使用,必须安装Postman Interceptor插件,这样才能直接使用chrome浏览器的cookie等信息,否则postman是无法完成老版本的功能的. 直接使 ...
- [py][mx]django实现根据城市和课程机构类别过滤
实现根据城市&课程机构过滤 实现点谁谁高亮,支持取交集. 直接上代码吧 本质上是过滤,多层过滤,取交集 def get(self, request): all_orgs = CourseOrg ...