1. 表达式语法
在上篇文章组件属性示例中，新建了一个属性whom, 引用该属性时使用了表达式：{!v.whom}，负责该属性的动态输出。
语法：{!expression}
上述示例中，我们的属性名称定义为whom，v表示视图（View)。当组件使用时，表达式的值将被评估并且动态替换。
注意：表达式区分大小写。空格忽略。如果自定义字段为myNamespace__Amount__c，要获取该属性值，必须写为：{!v.myObject.myNamespace__Amount__c}
1.1 表达式动态输出
利用表达式是最简单的值动态输出方式。
表达式的值可以来自：component属性，具体的数字，布尔值等。
示例：
component属性：{!v.whom} ==> 输出属性名为whom的值
文字值：{!123}， {!'abc'} ==> 输出分别为：123， abc
布尔值：{!true}， {!false} ==> 输出分别为：true，false
注意：文字值中，“!”后面可以直接跟数字值，如果是字符则需要用单引号' '包起来，不包含则组件不会加载，用双引号会报错。
1.2 条件表达式
1）三元表达式
与所有语言一样，这里也支持三元表达式，想必大家对三元表达式的概念都很清楚，这里就不再解释了。
示例：
{!v.displayMonth == '' ? 'No value' : 'Has value'}
displayMonth属性值不为空字符，打印：Has value;
displayMonth属性值为空字符，打印：No value
2）<aura:if>标记
类似与Java中if-else
示例：
<aura:component> <aura:attribute name="read" type="Boolean" default="false" /> <aura:if isTrue="{!v.read}"> you can read it. <aura:set attribute="else"> you cannot read it. </aura:set> </aura:if> </aura:component>
read属性值为：true，打印：you can read it.
read属性值为：false，打印：you cannot read it.
1.3 不同组件间数据绑定
当我们在在一个View中添加另一个组件，可以在父组件中初始化子组件的属性值。目前有两种语法格式：
语法1: <c:childComponent childAttr="{!v.parentAttr}" />
绑定语法，将父组件中的parentAttr属性和子组件的childAttr属性关联，初始化时将parentAttr的值传递给childAttr。运行中修改任意一个属性，都会导致另外一个属性值的改变。
示例：
parentAura.cmp
<!--Parent component--> <aura:component access="global"> <aura:attribute name="parentAttr" type="String" default="Parent Attribute" /> <!--实例化childAura组件--> <c:childAura childAttr="{!v.parentAttr}" /> <br/> parentAttr in parent: {!v.parentAttr} <div style="background:white"> <lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" /> </div> </aura:component>
parentAuraController.js
({ applyHandle: function (cmp, event, helper) { cmp.set('v.parentAttr', 'Parent update'); } })
childAura.cmp
<!--Child component--> <aura:component> <aura:attribute name="childAttr" type="String" default="Child Attribute"/> <div class="slds-p-top--large" tyle="background:white"> childAttr in child: {!v.childAttr} <lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" /> </div> </aura:component>
childAuraController.js
({
applyHandle : function(component, event, helper) {
component.set('v.childAttr', 'Child update');
}
})
output:
childAttr in child: Parent Attribute parentAttr in parent: Parent Attribute
点击childAura组件的apply按钮
childAttr in child: Child update parentAttr in parent: Child update
点击parentAura组件的apply按钮
childAttr in child: Parent update parentAttr in parent: Parent update
语法2: <c:childComponent childAttr="{#v.parentAttr}" />
非绑定语法，将父组件中的parentAttr属性和子组件的childAttr属性关联，初始化时将parentAttr的值传递给childAttr。运行中修改任意一个属性，只改变当前属性值，不会修改另外一个属性值。
示例：
parentAura.cmp
<!--Parent component--> <aura:component access="global"> <aura:attribute name="parentAttr" type="String" default="Parent Attribute" /> <!--实例化childAura组件--> <c:childAura childAttr="{#v.parentAttr}" /> <br/> parentAttr in parent: {!v.parentAttr} <div style="background:white"> <lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" /> </div> </aura:component>
parentAuraController.js
({ applyHandle: function (cmp, event, helper) { cmp.set('v.parentAttr', 'Parent update'); } })
childAura.cmp
<!--Child component--> <aura:component> <aura:attribute name="childAttr" type="String" default="Child Attribute"/> <div class="slds-p-top--large" tyle="background:white"> childAttr in child: {!v.childAttr} <lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" /> </div> </aura:component>
childAuraController.js
({ applyHandle : function(component, event, helper) { component.set('v.childAttr', 'Child update'); } })
output:
childAttr in child: Parent Attribute parentAttr in parent: Parent Attribute 点击childAura组件的apply按钮 childAttr in child: Child update parentAttr in parent: Parent Attribute 点击parentAura组件的apply按钮 childAttr in child: Child update parentAttr in parent: Parent update
作者：吴家二少
博客地址：https://www.cnblogs.com/wu-kai/
本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接
