vue如何使用jsx编写函数式组件？

最新推荐文章于 2024-10-03 11:49:22 发布

原创

最新推荐文章于 2024-10-03 11:49:22 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了在Vue CLI 3.x项目中如何使用JSX，包括基本的渲染、插值、遍历渲染、条件渲染、样式添加以及自定义组件的创建和使用。文中特别强调了在JSX中，条件渲染使用&&或三元运算，遍历渲染使用.map方法，并给出了具体的代码示例。此外，还展示了如何在JSX中引入和应用SCSS样式。

文章所有的代码是基于Vue CLI 3.x版本，不会涉及到一步步通过Webpack来配置JSX所需要的知识点。

注意: 如果是手动搭建的项目，需要通过安装插件才可使用JSX。

vue如何使用jsx编写

1.创建Test.jsx文件

export default {
   
   
  render() {
   
   
    return (
      <div>
        <p>vue 使用 jsx</p>
      </div>
    );
  },
};

如此就是最简易版的.jsx文件了

2.插值

在JSX中使用{}来绑定内容

export default {
   
   
  data() {
   
   
    return {
   
   
      val: "这里进行变量存储",
    };
  },
  render() {
   
   
    const {
   
    val } = this;
    return (
      <div>
        <p>vue 使用 jsx</p>
        {
   
   val}
      </div>
    );
  },
};

建议的写法就是在render中解构出来data里的变量，正文里使用即可。

当然，也可直接调用，方法如下：

<p>{
   
   this.val}</p>

3.遍历渲染、条件渲染

export default {
   
   
  data() {
   
   
    return {
   
   
      val: "这里进行变量存储",
      list: [
        {
   
   
          id: 1,
          name: "张三",
        },
        {
   
   
          id: 2,
          name: "张四",
        },
        {
   
   
          id: 3,
          name: "张五",
        },
        {
   
   
          id: 4,
          name: "张六",
        },
      ],
      isShow: true,
    };
  },
  render()