1.实现vue的v-for
在Vue开发中,经常使用v-for来遍历数组,然后进行渲染数据,另外也要注意还要给每一项绑定一个key,否则在删除、新增元素的时候会导致顺序错乱问题。
在React中是用数组的Map()方法来实现的。
<></> 相当于Vue的<template></template>元素。
2.实现vue的v-if
(1)在React中可以借助"三元运算符"来实现v-if
(2)第二种方式(不够简洁,不推荐)
3.实现vue的v-show
注: style 接受的值是一个对象,且用 {} 括号传入,而且对象的属性名只能用驼峰式来命名。
4.实现vue的v-model
v-model其实就是数据双向绑定,在vue项目中input输入框经常使用到v-model 。
React是利用input的value和onChange事件来实现。其实Vue组件的v-model是个语法糖,本质上是利用名为value的prop和名为input的事件来实现数据双向绑定的。
看一个例子:
父组件:
子组件: