Wei Zhang's Blog


  • 首页

  • 标签

  • 分类

  • 搜索

Vue3基础文档-列表渲染

发表于 2020-12-16 | 分类于 Vue3
字数统计: 92 字 | 阅读时长 ≈ 1 分钟

在 <template> 中使用 v-for

类似于 v-if,你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。比如:

阅读全文 »

Vue3基础文档-条件渲染

发表于 2020-12-16 | 分类于 Vue3
字数统计: 231 字 | 阅读时长 ≈ 1 分钟

在 <template> 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

阅读全文 »

vue-v-if与v-for

发表于 2020-12-16 | 分类于 Vue
字数统计: 213 字 | 阅读时长 ≈ 1 分钟
前言永远不要同时使用 v-if 与 v-for。 为什么当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。所以以下代码,将每次循环都要判断条件,浪费性能。 1<div v-for="item in list" v-if= ...
阅读全文 »

Vue3基础文档-Class 与 Style 绑定

发表于 2020-12-16 | 分类于 Vue3
字数统计: 705 字 | 阅读时长 ≈ 3 分钟

绑定 HTML Class

对象语法

阅读全文 »

Vue3基础文档-模板基础

发表于 2020-12-16 | 分类于 Vue3
字数统计: 511 字 | 阅读时长 ≈ 1 分钟

动态参数

1
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的组件实例有一个 data property attributeName,其值为 "href",那么这个绑定将等价于 v-bind:href。

同样地,你可以使用动态参数为一个动态的事件名绑定处理函数:

1
<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中,当 eventName 的值为 "focus" 时,v-on:[eventName] 将等价于 v-on:focus

阅读全文 »
<1…656667…191>

一期一会

951 日志
46 分类
68 标签
GitHub E-Mail
© 2017 — 2022 Wei Zhang | Site words total count: 684.2k
 本站访客数 人  本站总访问量 次