React中循环渲染类似Vue中 的v-for

17==》循环数组 类似v-for

import React, { Component } from "react";

export default class CharShop  extends Component {
    // state初始化一般写在构造器当中
    constructor(props){
        super(props);
        this.state={
            goods: [
             { id: 1, text: "web111" },
             { id: 2, text: "web222" },
             { id: 3, text: "web333" }
            ]
        }
    }

     render(){
         return(
             <div>
                {/* 条年渲染  类v-for */}
                {this.state.goods.map(item=>
                  return  <li key={item.id}>{item.text}</li>
                )}
             </div>
         )
     }
}

原文地址:https://www.cnblogs.com/IwishIcould/p/11966816.html

时间: 2024-10-10 23:32:13

React中循环渲染类似Vue中 的v-for的相关文章

Vue - ElementUI中循环渲染表格,控制字段的显示与隐藏 v-if与v-for同时使用

在Vue中使用v-for循环一个数组/对象时,如果再使用v-if,那么会提示使用计算属性(能正常使用),因为Vue中是不提倡v-for与v-if同时使用的.在我的项目中也遇到了问题不过翻看文档解决了修改前: <el-table-column v-for="(item, index) in columns" :prop="item.prop" :key="index" align="center" :width="

react 实现类似vue中的&lt;keep-alive&gt;的功能,并解决antd-mobile切换回来时的空白

在移动端的spa页面中,只要使用到了路由就很有必要使用到状态保存的功能,这样才能保证在页面进行切换的时候,让用户可以看到刚才滑动的地方,让用户的体验更加友好.这儿我找到了react-router-cache-route这个插件,使用方法直接参考文档. 在使用了这个插件以后,结合着antd-mobile使用时.会出现轮播图空白的现象,这个现象在手机端显得忧外的明显 上面问题的解决方法就是使用 react-router-cache-route 这个插件以后额外引入的声明周期,然后使用 forceUp

微信小程序 watch监听数据变化 类似vue中的watch

1.参考 https://github.com/donghaohao/vuefy 2.项目使用 列表循环  图片上传对应每个学生 需要监听学生的变化  上传对应的图片 原文地址:https://www.cnblogs.com/zhengao/p/10734826.html

vue.js中如何渲染本地数据库中的图片

// 带参数传值 <router-link :to="{'name':'foot',params:{'id':scene_list.id}}">本地美食</router-link> <template> <div> <h1>美食</h1> <table border="1"> <tr> <td>美食</td> <td>美食图片</

vue如何循环渲染element-ui中table内容

对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table的使用 ——当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名.可以使用width属性来定义列宽. 相当于是要枚举出所有需要展示的参数,这种情况在参数比较少的情况下是比较方便的,但是在有很多

Vue源码学习(六)之虚拟DOM——Vue中的DOM-Diff (上)

1. 前言 在上一篇文章介绍VNode的时候我们说了,VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点,然后就可以对比新旧两份VNode,找出差异所在,然后更新有差异的DOM节点,最终达到以最少操作真实DOM更新视图的目的.而对比新旧两份VNode并找出差异的过程就是所谓的DOM-Diff过程.DOM-Diff算法时整个虚拟DOM的核心所在,那么接下来,我们就以源码出发,深入研究一下Vue中的DOM-Diff过程是怎样的. 2. patch 在Vue中,把 DOM-Dif

vue中src下的assets文件与static文件的几点区别

区别一: assets文件时src下的,所以最后运行时需要进行打包:而static文件不需要打包就直接放在最终的文件中了. 区别二: assets中的文件在.vue中的template/style下用 ../ 这种相对路径的形式进行引用,在script下必须用 @import 的方式引入: 而 static 下的文件在.vue中的任何地方都只要使用 ../ 这种相对路径的方式引入.

vue中如何不通过路由直接获取url中的参数

前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的.

rich-text中如何显示云存储中的图片

有这样的场景: 对于只是公司官网的小程序,单独搭建一个后台管理系统确实不值得,使用小程序提供的云存储和云数据库就完全够用了,企业动态和公司新闻这些信息可能是需要定期更新的,内容中可能涉及到文本和图片的混排,一般会采用rich-text渲染,如果把这个图片存储在云存储中,该怎么显示呢? rich-text中如何渲染云存储中的图片? 首先,先把图片上传到云存储中: 每张图片会生成一个FileID,以后所有图片的操作都是通过这个FileID进行的. 其次,编辑文章的内容,其中会包含一个上面的图片,编辑