VueJS 婴儿步– 插补

1+

插补

插值意味着可以使用Vue轻松地放置或渲染数据’的双胡子语法。

 插补
插补

使用jsfiddle进行设置,请参见:

文本

简单插值

通过使用双重胡子语法,您可以呈现数据:

表达式的内插

插值可以在Vue中包含简单的表达式。

简单表达式插值

在这里,您还可以在双重弹跳中使用JavaScript表达式:

但是,您还可以使用方法来处理数据并返回要呈现的字符串或整数:

三元算子表达式插值

您还可以使用三元运算符进行简单的条件渲染:

v-once指令示例

您还可以执行一次插值,该插值不会通过使用 v-once指令 ,但请记住,这也会影响同一节点上的所有其他绑定:


渲染元素和组件  一旦  只要。在后续重新渲染时,元素/组件及其所有子元素将被视为静态内容并被跳过。这可用于优化更新性能。

注意 :

  • 您只能在双重弹药中使用一个表情
  • 表达式与语句不同。例如,下面的代码赢了’无法工作,因为它不是表达式,而是语句:
  • 双重弹跳不支持流量控制:

原始HTML

如果你不这样做’想要转义数据并将其呈现为真实HTML,请使用  html  directive:


的内容 跨度 将被替换为 rawHtml 属性,解释为纯HTML–数据绑定将被忽略。请注意,您不能使用  html  因为Vue不是基于字符串的模板引擎,所以可以组成模板的部分。取而代之的是,组件是UI重用和合成的基本单位。

警告 :呈现HTML可能会有风险,因为它可能导致您网站上的XSS攻击。

属性

在HTML属性内不能使用胡须。而是使用 v-bind directive:


在布尔属性的情况下,其仅存在就意味着  真正 v-bind 工作原理有所不同。在此示例中:


If  是 ButtonDisabled has the value of nullundefined, 要么 false,  残障人士 属性甚至不会包含在渲染中<button> element.

任务给你

如上例所示,您可以看到我们使用 我的宠物 .join( “, “) 导致返回的输出 我的宠物’名称是Angular,React,Vue。 

如何输出回报 我的宠物’名称是Angular,React和Vue?

自己尝试一下,并与我们分享jsfiddle链接。

1+