这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

本文主要介绍了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 展示效果在这里插入图片描述

代码讲解

我们可以看到。

第一个你好，为直接使用{{messageHello}}, 与下面的三行进行对比第二行真正是用v-text标签，进行数据展示第三行则在messageHello后面追加“Hello”字符串。第四行在消息前面追加“hello”字符串。

第五行则使用v-html 展示了带样式的标签值。

总结：

v-text 支持直接将组件的文本直接渲染，还支持表达式操作。包括三元组以及条件显示等等。

v-html 支持包组件的属性（带样式的）直接渲染出来到页面中。

vue3 这两个指令学期来吧。

最后，写文不易。希望多多支持！非常感谢！！！

会继续保持学习更新vue3笔记，其他朋友可以看看官方文档。

cn.vuejs.org

今天就写到这里。

我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢

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

代码讲解

总结：