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>
现在我得到了这个错误:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Vue'
| property '$options' -> object with constructor 'Object'
| property 'router' -> object with constructor 'VueRouter'
--- property 'app' closes the circle"
谢谢你。
解决方案
我找到了一种不使用 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>
推荐阅读
- python - 使用 python-docx 突出显示 docx 文件中的单词会产生不正确的结果
- apache-nifi - 我们如何确保在处理 HTTP 请求时使用 nifi 文件只处理一次
- python - 基于列名称扩展的 DataFrame 列的平均值
- python - 安排一个任务在每个星期五运行,但如果它完成并且计算机在星期五重新启动,则避免运行两次 + 如果计算机在星期五关闭,则在第二天执行
- anychart - 如何为日期时间刻度格式化 x 标签
- php - 通过图像轮播结束时返回第一张幻灯片
- javascript - 使用 react-native-navigation 定义全局布局?
- r - 如何编写一个循环来创建 ts 对象并将它们单独存储?
- django - Django 在特定时间跨度后自动更新记录
- sql-server - SQL - 动态枢轴 - 如何修复?