react和vue对比使用

条件判断

只有你失去之后你才会珍惜v-if v-else等

在vue中我们使用v-if v-else 称心如意。我们在template中挥斥方遒 ，vue的指令伴随我们征战无数沙场，
建功立业。然而你转战react时，指令大将却被你留在了家里，爱上了别人，你们这些负心汉！

你难道忘记了他们曾经打下的江山吗？

现如今在jsx的战场， 你虽然失去了我们（vue）全家族的支持，但是却获得了react相关家族的支持 ，

强扭的瓜不甜，我只能祝福你们了

v-for（vue） & map（react）

v-for

在vue中 v-for 极大的提升了 我们对dom的简写，提高了我们的开发效率，使代码更加优雅。

<template v-for="(item,index) in insuranceData">
      <div :key="item.id">
          <div class="detail_item_box" >
              <div class="detail_title">{{item.title}}</div>
              <div v-if="item.notice" class="detail_sxpalin">                                   {{item.notice}}
              </div>
          </div>
    </div>
</template>

map

<View className="historyList">
    {
        statusList.map((item)=>{
            return (
                <View className="history_item_content">
                    <View className="history_header">
                        <View className="header_dot"></View>
                        <View>{item.title}</View>
                    </View>
                    {
                        item.time ?
                        <View className="status_content">
                            {item.time}
                        </View>
                        :
                        <></>
                    }
                </View>
            )
        })
    }
</View>

动态行内样式&动态类名

vue

<template v-for="(item,index) in busnissInfo">
    <div :key="item.label" v-if="index<3" class="common_item_box"  >
        <div 
             class="item_label"
             :style="{ color: index > 2 ?'#595959' :'#969DA3' }"
        >
            {{item.label}}
        </div>
        <div class="item_value"   v-if="index>2">{{item.value}}</div>
        <div class="item_value" v-else style="color:#969DA3;" >                             {{detailInfoMap[item.value]}}
        </div>
     </div>
​
  <div 
     class="status_order"
     :class="{
             noPrice: detailInfoMap['quotationStatus']==1,
             havePrice:detailInfoMap['quotationStatus']==2 ,
             haveDown: detailInfoMap['quotationStatus']==3 
     }"
   >
      <span v-if="pageType=='point'">{{ quatStatusMap['detail'] }}</span>
      <span v-if="pageType!='point'">{{ orderStatusMap['name'] }}</span>
  </div>
</template>

react

<View className="smsCode_box">
    <View 
        onClick={()=>handleClose()} 
        className="img_box" 
        style={{ textAlign:'right' }}
    >
        <image  
            className="closeImgStyle" 
            src={smsLoginurl} 
            mode="scaleToFill">
        </image>
    </View>
</View>

数据模板

vue

在vue中如果想要在 dom中使用变量 需要使用 {{ }}

<div class="common_item_box" v-for="(item,index) in baseInfo" :key="index">
       <div class="item_label">{{item.label}}</div>
       <div class="item_value">{{detailInfoMap[item.value]}}</div>
</div>

react

<View className="curTIme_box">{currentTime}</View>

感受

不管在使用vue，还是使用react 我深刻的感受就是 javascript 才是关键，css是主要的辅助。所以学好javascript ，可以很短时间应用不同的框架