JSX语法

最新推荐文章于 2025-07-13 20:00:00 发布

Shirley_linxiaojia

最新推荐文章于 2025-07-13 20:00:00 发布

阅读量644

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JSX vue

本文链接：https://blog.youkuaiyun.com/Shirley_linxiaojia/article/details/79852145

前端专栏收录该内容

6 篇文章

订阅专栏

本文对比了Vue与JSX的语法特点，介绍了如何在JSX中实现Vue中常见的<template>、v-if及v-for等功能，并展示了具体代码示例。

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

我在开发中主要用的是vue2，但是有时候改别人的代码，别的是用JSX语法写的，所以现在把我碰到的JSX写法总结一下。用JSX真是很能锻炼JavaScript的能力，用惯了其实JSX也挺方便的。

先来简单说一下JSX是什么：

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

1、vue中的<template>

vue中是用<template>来写html的，而用JSX写法，所有的dom元素都用render方法，像写函数一样加到页面中。

const index = {
    name: 'index',
    components: {
    },
    data() {
        return {
        };
    },
    props: {
        msg: {
            // type: String,
            // default: 'World'
        }
    },
    render(h) { // eslint-disable-line
        return (
            <div class="welcome">
                 和vue一样，所有的元素都必须包含在一个父元素里面。
            </div>
        );
    },
    mounted(){
    },
    methods: {
    }
};

export default index;

2、 vue中的v-if

在JSX写法中，类似v-if的功能不止一种写法，闲杂列举我碰到的两种。

1、

第一种：

const index = {
    data() {
        return {
            one:false,
            two:1
        }
    },
    render(h) {
        const { one , two } = this;  //为了在下面引用data时少些this，可以在render函数里把this赋值给这些数据
        return (
            <div>
                { one && <div>当one为true时才显示</div> }
                { two==2 && <div>当two为2时才显示</div>}
            </div>
        )
    }
}

第二种：

const index = {
    data() {
        return {
            key: 0
        }
    },
    render(h) {
       let show;
       if(key == 1){
           show = <div>当key=1时显示</div>
       }
       return (
          <div>
              { show } 
          </div>
       )
    }
}

3、vue中的v-for

在JSX中，需要循环数据的时候就用JS原生的循环方式就可以，大多数我用的都是数组的map遍历方法

4、动态的设置class

<span class={'checkbox ' + (this.selected ? 'checked' : 'unchecked')}></span> 
//当selected为true时，class为’checkbox checked‘，为false时，class为’checkbox unchecked‘