vue3前端青铜到黄金王者 - 第一个入门v-text

本文链接：https://blog.youkuaiyun.com/qq_28008615/article/details/119338100

本文通过实例详细介绍了Vue3中v-text与v-html指令的基本使用方法及技巧，包括文本输出显示、字符串拼接、三元表达式及动态显示HTML标签等操作。

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

本文主要介绍了Vue3的 v-text指令简单使用方法.

结合实例形式分析了v-text & v-html指令文本输出显示简单操作技巧,需要的朋友可以参考下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--    <script src="https://unpkg.com/vue@3.1.5/dist/vue.global.js" ></script> -->
<script src="/vue3.1.5_vue.global.js"></script>
</head>
<body>
<div id="app">
<p>v-text</p>
        <!-- 给标签内容赋值 -->
        <div>{{messageHello}}</div>
        
        
        <!-- 指定标签内部的inner text (同上)-->
        <div v-text="messageHello"></div>
        <!-- 字符串拼接 -->
        <div v-text="messageHello+'&Hello'"></div>
        <!-- 三元表达式 -->
        <div v-text="messageHello?'hello'+messageHello:'messageHello is false '"></div>
        <!-- 可以放js表达式 -->
        <div v-text="flag?message:messageHello"></div>
        <!-- 动态显示html标签 -->
        <div v-html="messageRed"></div>
</div>
</body>
<script>
    const { createApp } = Vue
    const messageHello = "你好，Vue3.0"
    const messageRed = "<div style='background-color:red'>你好Vue3.0"
    const flag = true
    const app = {
        setup() {
            return {
                messageHello,
                messageRed,
                flag
            }
        }
    }   
    createApp(app).mount('#app')
</script>
</html>

vue3 展示效果
在这里插入图片描述