第五十四:渲染数据 v-text 和 v-html

v-text : 解析成文本

v-html: 解析成 html

<div id="app">
    <h3>{{ web.title }}</h3>

    <!-- v-text 将数据解析为纯文本格式 -->
    <h3 v-text="web.title"></h3>

    <!-- v-html 将数据解析为 html 格式 -->
    <h3 v-html="web.url"></h3>
</div>

js

<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const web = reactive({
                title: "邓瑞编程",
                url:"<i style='color:blue;'>www.dengruicode.com</i>"
            })

            return {
                web
            }
        }
    }).mount("#app")
</script>
相关推荐
南棱笑笑生5 分钟前
20250302让chrome打开刚关闭的网页
前端·chrome
银之夏雪25 分钟前
ESLint 深度解析:原理、规则与插件开发实践
java·前端·javascript
白嫖叫上我1 小时前
js删除嵌套数组对象中的某项,并重置其后的索引
前端·javascript
web135085886351 小时前
【Vue教程】使用Vite快速搭建前端工程化项目 Vue3 Vite Node.js
前端·vue.js·node.js
下雨打伞干嘛1 小时前
前端怎么排查幽灵依赖
前端
yinxiangzhongqing2 小时前
从vue源码解析Vue.set()和this.$set()
前端·javascript·vue.js
廖若星辰LTY2 小时前
uniapp 解决 H5 跨域问题
前端·javascript·uni-app·html5
青红光硫化黑3 小时前
前端基础之内置指令与自定义指令
前端·javascript
青红光硫化黑3 小时前
前端基础之收集表单数据
前端·javascript
GISer_Jing3 小时前
前端埋点项目从设计到实现详解
前端·javascript·react.js