Javascript 如何在VueJS SFC中的数据、计算和方法中使用JSX

我正在设置一个用于学习的应用程序。从React开始，我知道如何使用JSX，当我在VueJS中编写时，我不知道如何在这里使用它

<template>
    <div>
        <h1>{{this.message}}</h1> <!--Work-->
        <h1>{{this.messageJSX}}</h1> <!--Not working-->
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                message: "Hello, JSX!", // Work
                messageJSX: <span>Hello, JSX!</span>, // Not Working
            }
        }
    }
</script>

---

谢谢。

JSX仅用于React，vue.js中没有JSX。他们是不同的

也许这就是你想要的：

<template>
<div>
    <h1>{{message}}</h1> <!--Work-->
    <h1><span v-if="messageJSX">{{messageJSX}}</span></h1> <!--Not working-->
</div>
</template>

<script>
export default {
    name: "test",
    data() {
        return {
            message: "Hello, JSX!", // Work
            messageJSX: 'Hello, JSX!', // Not Working
        }
    }
}
</script>

{{message}}
{{messageJSX}}
导出默认值{
名称：“测试”，
数据（）{
返回{
消息：“你好，JSX！”，//工作
messageJSX:'你好，JSX！'，//不工作
}
}
}

---

无需使用

此

，因为

数据

已与

此

绑定

消息jsx应为字符串

messageJSX: "<span>Hello, JSX!</span>"

---

我找到了一种不用JSX的方法。谢谢大家

您知道使用像下面组件这样的对象的名称吗

<template>
    <div>
        <h1>{{message}}</h1> <!--Work-->
        <h1>{{messageJSX}}</h1> <!--Not working-->
        <component :is="messageComponent"></component> <!--Work-->
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                message: "Hello, JSX!", // Work
                messageJSX: <span>Hello, JSX!</span>, // Not Working
                messageComponent: {
                    template: `<span>Work with all other components, not just span</span>`
                }
            }
        }
    }
</script>

{{message}}
{{messageJSX}}
导出默认值{
名称：“测试”，
数据（）{
返回{
消息：“你好，JSX！”，//工作
messageJSX:你好，JSX！，//不工作
消息组件：{
模板：`使用所有其他组件，而不仅仅是span`
}
}
}
}

您可以使用plugin

v-runtime-template

<template>
  <div>
    <v-runtime-template :template="template"></v-runtime-template>
  </div>
</template>

<script>
  import VRuntimeTemplate from "v-runtime-template";
  import AppMessage from "./AppMessage";

  export default {
    data: () => ({
      name: "Mellow",
      template: `
        <app-message>{{hello}} {{ name }}!</app-message>
      `
    }),
    components: {
      VRuntimeTemplate,
      AppMessage
    },
    computed: {
      hello () {
        return 'Hello'
      }
    }
  };
</script>

从“v-runtime-template”导入VRuntimeTemplate；
从“/AppMessage”导入AppMessage；
导出默认值{
数据：（）=>({
名称：“醇厚”，
模板：`
{{{你好}}{{name}}！
`
}),
组成部分：{
VRuntimeTemplate，
应用消息
},
计算：{
你好（）{
返回“你好”
}
}
};

我想知道这是否是VueJS中的JSX。很抱歉，我的回答没有反映出来。我从来没有在vue中使用过JSX。我读了一点你的url，它说你需要为你的

中的
预设和配置安装一些额外的插件。babelrc
：谢谢你，我想返回JSX而不是字符串，因为有时候
消息JSX
不是t可以是Vue组件或来自其他UI库的组件。谢谢，但这不是我想要的。我想使用一些其他Vue组件，如Foo，然后它将成为
messageJSX:Hello，JSX！
。或者一些组件UI库，如
Hello，JSX！
。您可以放置一个名为Foo.Vue的文件，然后可以导入并使用它阅读更多关于单文件组件的信息
<template>
    <div>
        <h1>{{message}}</h1> <!--Work-->
        <h1>{{messageJSX}}</h1> <!--Not working-->
        <component :is="messageComponent"></component> <!--Work-->
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                message: "Hello, JSX!", // Work
                messageJSX: <span>Hello, JSX!</span>, // Not Working
                messageComponent: {
                    template: `<span>Work with all other components, not just span</span>`
                }
            }
        }
    }
</script>

<template>
  <div>
    <v-runtime-template :template="template"></v-runtime-template>
  </div>
</template>

<script>
  import VRuntimeTemplate from "v-runtime-template";
  import AppMessage from "./AppMessage";

  export default {
    data: () => ({
      name: "Mellow",
      template: `
        <app-message>{{hello}} {{ name }}!</app-message>
      `
    }),
    components: {
      VRuntimeTemplate,
      AppMessage
    },
    computed: {
      hello () {
        return 'Hello'
      }
    }
  };
</script>