vue.js将一个对象的所有属性作为prop进行传递
1、方法一:使用不带参数的v-bind写法
<div id="app">
<child v-bind="todo"></child>
</div>
v-bind中没有参数,而组件中的props需要声明对象的每个属性
Vue.component('child', {
props: ['text','isComplete'],
template: '<span >{{ text }} {{isComplete}}</span>'
})
new Vue({
el: '#app',
data: {
todo: {
text: 'Learn Vue',
isComplete: false
}
}
})
显示效果如下
2、方法二:使用带参数的v-bind写法
<div id="app">
<child v-bind:todo="todo"></child>
</div>
v-bind后跟随参数todo,组件中的props需要声明该参数,组件变可以通过todo来访问对象的属性
Vue.component('child', {
props: ['todo'],
template: '<span >{{ todo.text }} {{todo.isComplete}}</span>'
})
new Vue({
el: '#app',
data: {
todo: {
text: 'Learn Vue',
isComplete: false
}
}
})
显示效果如下
vue.js将一个对象的所有属性作为prop进行传递的更多相关文章
- vue.js实例对象+组件树
vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件 ...
- 【转】js获取对象的所有属性和方法
//有时候需要知道一个js对像的所有属性和方法来帮助调试,下面是再网上找到的一个比较给力的方法 function displayProp(obj){ var names=""; f ...
- vue.js组件之间的通讯-----父亲向儿子传递数据,儿子接收父亲的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js 判断对象属性是否存,不存在添加
Vue.set是可以对对象添加属性的,这里item对象添加一个checked属性 //if(typeof item.checked=='undefined'){if(!this.item.checke ...
- js 判断对象中所有属性是否为空
测试: var obj = {a:"123",b:""}; for(var key in obj){ if(!obj[key]) return; } 函数封装: ...
- 161227、js显示对象所有属性和方法的函数
要想看到实际效果,可以先声明一些属性跟方法,否则是看不到,仔细往下看有例子的. function ShowObjProperty(Obj) { var PropertyList=''; var Pro ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- 作为 attribute 和 property 的 value 及 Vue.js 的相关处理
attribute 和 property 是 Web 开发中,比较容易混淆的概念,而对于 value,因其特殊性,更易困惑,本文尝试做一下梳理和例证 attribute 和 property 的概念 ...
- vue组件详解(二)——使用props传递数据
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法 组件不仅仅 ...
随机推荐
- 利用Vue v-model实现一个自定义的表单组件
原文请点此链接 http://blog.csdn.net/yangbingbinga/article/details/61915038
- solr 学习之数据导入
将数据库中的数据导入到我们的solr索引库中(DataImportHandler) 1.将jdbc的jar包和solr包中的DataImport的jar包拷贝到webapp中solr/WEB-INF/ ...
- java中sql语句能不能加分号的问题?
一.原因 在程序运行中,当执行sql后总是报无效字符错误:但是把程序放在pl/sql中执行又没有错误.让我很纳闷!于是我开始查找资料,然后我终于发现了问题. 二.问题剖析 原来在程序中:如果你在程序 ...
- vue 开发多页应用
vue 开发多页应用 https://www.cnblogs.com/fengyuqing/p/vue_cli_webpack.html https://segmentfault.com/a/1190 ...
- Winform程序部署方式总结一——ClickOnce发布
针对Winform程序,介绍两种常用打包方式:ClickOnce和Windows Installer 应用程序如下: 一.ClickOnce发布 1.找到需要发布的项目文件,右击,从弹出的快捷菜单中找 ...
- VBA 实现学校上课教员一学期中所有上课时间,在一页中通过背景底色反应出来
需求:学校一学期的所有课程表,每个教员都有可能上好几门课,但给一个教员调课时需要查找所调课时间位置有没有此教员上其它的课 相冲突,手动查找很不方便,这里想通过一个表中位置显示出同一教员在所有课表中出现 ...
- 【bzoj2870】最长道路tree 树的直径+并查集
题目描述 给定一棵N个点的树,求树上一条链使得链的长度乘链上所有点中的最小权值所得的积最大. 其中链长度定义为链上点的个数. 输入 第一行N 第二行N个数分别表示1~N的点权v[i] 接下来N-1行每 ...
- 【bzoj4698】[Sdoi2008] Sandy的卡片 后缀数组
题目描述 Sandy和Sue的热衷于收集干脆面中的卡片.然而,Sue收集卡片是因为卡片上漂亮的人物形象,而Sandy则是为了积攒卡片兑换超炫的人物模型.每一张卡片都由一些数字进行标记,第i张卡片的序列 ...
- Dwango Programming Contest V 翻车记
A:签到. #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> ...
- 【刷题】BZOJ 4259 残缺的字符串
Description 很久很久以前,在你刚刚学习字符串匹配的时候,有两个仅包含小写字母的字符串A和B,其中A串长度为m,B串长度为n.可当你现在再次碰到这两个串时,这两个串已经老化了,每个串都有不同 ...