jsrender for array 和for object语法

本文详细介绍了JSRender模板引擎中forarray和forobject的使用方法,包括数组循环、对象遍历及特殊字面量的使用技巧,对比了不同方式获取索引的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

for array 循环数组

循环使用案例

定义数组数据

var  data = {
   names: ["Maradona","Pele","Ronaldo","Messi"]
 }

 

模版中使用

{{for names}}
  <div>
    <b>{{: #index+1}}.</b>
    <span>{{: #data}}</span>
  </div>
{{/for}}

 

输出结果

1. Maradona
2. Pele
3. Ronaldo
4. Messi

 索引可以在循环中通过特殊字面量#index获取,特殊字面量#data相当于this,在本例中表示每一个name。

 

另jsrender中使用for循环时如使用if等判断时虽然不创建常规数据作用域,但却干扰了隐藏作用域。也就是说,{{if }}不会阻断常规数据(你传入的数据)的可见性,但会干扰隐藏数据(#index、#parent)的可见性。

所以获取索引下标时尽量使用#getIndex()获取索引,避免使用#index,除非你的应用足够简单。

可以尝试下面两者使用后的区别对比

1.

{{for names}}
  {{if #data.indexOf("M") == 0}}
    <div>
      <b>{{: #index+1}}.</b>
      <span>{{: #data}}</span>
    </div>
  {{/if}}
{{/for}}

 

2.

 {{for names}}
   {{if #data.indexOf("M") == 0}}
     <div>
       <b>{{: #getIndex()+1}}.</b>
       <span>{{: #data}}</span>
     </div>
   {{/if}}
 {{/for}}

 

 

 

for object 进入object中

这里for不代表循环,表示进入到object对象中。把当前的上下文设置为Object,类似于Handlebars.js中的with。

 举个例子:

var data =
{
  "title": "The A team",
  "members": [
    {
      "name": "Pete",
      "city": "members_city",
      "address": {
        "city": "address_city",
        "city1": "address_city1",
        "city2": "address_city2"
      }
    }
  ]
}

 

模版

{{for members}}
  {{for address}}
    <p>.{{:city}}</p>
  {{/for}}
{{/for}}

 

结果

address_city

  从结果可以看出,虽然members的item下也有city属性,但由于通过{{for address}}进入到了address指向的Object中,{{:city}}直接从address中获取了。

     同时,address有三个属性,但结果只输出了一行,证明{{for Object}}是不会循环的,仅仅是切换一下this。

 

转载于:https://www.cnblogs.com/hwaggLee/p/4573528.html

<think>好的,我现在要处理用户的问题:“v-for为什么里面都是名字比上它的名字加s”。首先,我需要理解用户的具体疑问是什么。用户提到的“名字比上它的名字加s”可能指的是在Vue的v-for指令中,常见的变量命名习惯,比如使用单数形式(item)复数形式(items)。例如,在代码中经常看到类似v-for="item in items"这样的写法,其中items是数组名,而item是数组中单个元素的别名。 接下来,我需要确认用户的问题是否与变量命名的习惯有关。可能用户注意到在v-for循环中,数组名通常是复数形式,而循环的别名是单数形式,因此产生了疑问:为什么会有这样的命名惯例?或者是否存在强制性的语法要求? 首先,我应该回顾Vue.js官方文档中关于v-for的部分,确认是否有相关的命名规则。根据Vue的文档,v-for语法是v-for="item in items",其中items是源数据数组,而item是当前迭代元素的别名。这里的命名并不是强制性的,开发者可以自由选择变量名。但通常,开发者会遵循单数(item)复数(items)的命名习惯,以提高代码的可读性。 接下来,我需要考虑用户可能的困惑点。用户可能误以为这种命名方式是Vue的语法要求,或者认为必须使用单复数形式才能正确运行。但实际上,这只是约定俗成的做法,并不是语法的一部分。例如,开发者完全可以使用v-for="product in products",甚至v-for="element in array",只要保证数据源是正确的数组即可。 另外,用户可能在实际代码中看到大量这样的例子,因此形成了这种印象。这时候需要解释清楚,这样的命名习惯是为了代码的可读性维护性,而不是语法强制要求的。同时,可能还需要提醒用户注意变量名的作用域问题,避免在循环内部覆盖外部变量。 然后,我需要检查是否存在其他可能的问题。例如,用户是否在某种情况下遇到了错误,因为变量名没有正确对应?例如,如果数组名是单数形式,而别名也使用单数,是否会导致混淆?比如v-for="item in itemList",这里itemList是数组名,而item是元素别名,这样的命名同样是合理的,只是复数形式更常见。 此外,可能还需要提到在嵌套循环中的情况,比如v-for="user in users",内部再嵌套v-for="post in user.posts",这时候命名习惯有助于区分不同层级的元素,增强代码的可读性。 总结来说,用户的问题源于对常见命名惯例的观察,但可能误解为语法规则。需要明确说明Vue本身没有这样的限制,单复数命名只是最佳实践,目的是提高代码的可读性,而不是技术上的必然要求。同时,提供示例说明不同的命名方式都是可行的,只要符合逻辑即可。 最后,应该确保回答结构清晰,分点说明,可能包括:v-for的基本语法、命名习惯的原因、示例说明、常见误区的澄清等。同时,结合用户提供的代码示例中的命名习惯,进一步巩固解释。</think>让我们逐步分析 `v-for` 指令中常见的命名规范及其原理: ```html <div v-for="item in items">...</div> <!-- 典型写法 --> <div v-for="product in products">...</div> <!-- 同类示例 --> ``` ### 1. 基本语法结构 `v-for` 的标准格式为: ```html v-for="[元素别名] in [数据源]" ``` - **数据源**:必须是数组或可迭代对象 - **元素别名**:当前迭代项的临时变量名 ### 2. 命名惯例的起源 #### (1) 英语语法习惯 - 复数形式表示集合(如:`items` 表示多个元素的集合) - 单数形式表示单个元素(如:`item` 指代集合中的一个元素) #### (2) 代码可读性优化 ```javascript data() { return { books: [ // 复数命名集合 { id: 1, title: 'Vue指南' }, { id: 2, title: 'JS高级编程' } ] } } ``` ```html <!-- 循环时单数形式更符合语义 --> <li v-for="book in books">{{ book.title }}</li> ``` ### 3. 技术层面的优势 #### (1) 作用域清晰 ```html <div v-for="user in users"> <!-- 外层循环 --> <div v-for="order in user.orders"> <!-- 内层循环 --> {{ user.name }} - {{ order.id }} <!-- 明确区分层级 --> </div> </div> ``` #### (2) 类型提示作用 当看到 `product in products` 时: - 立即明确 `products` 是产品集合 - 知道 `product` 具有 `price`/`name` 等属性 ### 4. 非强制性的例外情况 #### (1) 单数数据源 ```html <div v-for="num in [1,2,3]"> <!-- 直接使用字面量 --> {{ num }} </div> ``` #### (2) 索引值的情况 ```html <div v-for="(item, index) in itemList"> <!-- 自定义命名 --> {{ index }}: {{ item }} </div> ``` #### (3) 对象迭代 ```html <div v-for="(value, key) in object"> <!-- 官方推荐格式 --> {{ key }}: {{ value }} </div> ``` ### 5. 错误命名示例 ```javascript data() { return { dataArray: ['A', 'B', 'C'] // 复数词尾不明显 } } ``` ```html <!-- 不符合惯例但语法正确 --> <div v-for="element in dataArray"> {{ element }} </div> ``` ### 6. 最佳实践建议 1. **保持一致性**:整个项目统一使用相同命名风格 2. **语义明确**:优先使用 `item in items` 形式 3. **避免歧义**:不要使用 `data in dataList` 这种重复词 4. **嵌套处理**:使用 `user in users` 配合 `post in user.posts` ### 7. 底层实现原理 Vue 的编译过程会将模板转换为渲染函数: ```javascript // 编译后的代码示例 function render() { return _c('div', _l(items, function(item) { // _l 是列表渲染函数 return _c('div', item.text) }) ) } ``` 无论使用何种命名,最终都会转换为标准的 JavaScript 迭代函数 ### 总结 这种命名习惯是**约定优于配置**的典型实践,主要价值体现在: - 提升代码可读性(核心价值) - 方便团队协作 - 强化数据关系认知 - 降低维护成本 实际开发中可以根据团队规范灵活调整,但保持语义清晰始终是核心原则。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值