vue快速入门(四)v-html

news/2024/7/10 2:44:36 标签: vue.js, html, 前端, vue

注释很详细,直接上代码

上一篇

新增内容

使用v-html将文本以html的方式显示

源码

html"><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 挂载点 -->
  <div id="root">
    <!-- 直接插入的方式 -->
    <div>{{msg}}</div>
    <!-- 使用v-html插入的方式 -->
    <div v-html="msg"></div>
  </div>

  <!-- 导入vue的js代码 -->
  <script src="./lib/vue2.js"></script>

  <script>
    const app = new Vue({// Vue实例
      el: '#root',// 挂载点
      data: {// 数据
        msg:'<h1>Hello Vue!</h1>'
      }
    })
  </script>
</body>
</html>

效果演示

在这里插入图片描述


http://www.niftyadmin.cn/n/5469276.html

相关文章

编程基础---C/C++基础知识

语法和语义 变量定义 基本数据类型&#xff1a;定义整型&#xff08;int、long、short&#xff09;、浮点型&#xff08;float、double&#xff09;、字符型&#xff08;char&#xff09;等基本数据类型的变量。 自定义类型&#xff1a;定义结构体、联合体、枚举等自定义类…

Airtable、pyairtable

文章目录 一、关于 AirtableAirtable 公司历史诞生发展 产品方向产品层级国内模仿者竞争对手关于 API Key价格 二、关于 pyairtable安装快速使用 一、关于 Airtable 官网&#xff1a;https://www.airtable.comgithub : https://github.com/AirtableAirtable AI &#xff1a; h…

【数据结构】初识数据结构与复杂度总结

前言 C语言这块算是总结完了&#xff0c;那从本篇开始就是步入一个新的大章——数据结构&#xff0c;这篇我们先来认识一下数据结构有关知识&#xff0c;以及复杂度的相关知识 个人主页&#xff1a;小张同学zkf 若有问题 评论区见 感兴趣就关注一下吧 目录 1.什么是数据结构 2.…

【Redis】解决List类型的消息可靠性问题

前言 平时做后端开发时&#xff0c;如果需要用到消息队列功能&#xff0c;但公司的IT环境又没有提供专业的队列软件&#xff08;RabitMQ/Kafka…&#xff09;&#xff0c;那么在简单场景下&#xff0c;可以使用 Redis 的List数据类型来做消息队列。 但List类型有一个挺致命的…

jvm总结学习

四种加载器 1.启动类加载器 2.拓展类加载器 3.应用程序加载器 4.自定义加载器 沙箱机制 就是为了保证安全&#xff0c;增加的一些权限。 native方法区&#xff08;静态变量&#xff0c;常量&#xff0c;类信息&#xff08;构造方法&#xff0c;接口定义&#xff09;&…

git如何合并两个分支中的不同某个文件

在Git中&#xff0c;如果你想要合并两个分支中的某个特定文件&#xff0c;而忽略其他文件的差异&#xff0c;你可以使用git checkout命令结合分支名来检出那个文件的特定版本&#xff0c;然后再提交到你的当前分支。以下是具体的步骤&#xff1a; 确保你在正确的分支上&#xf…

CentOS 镜像下载

CentOS 镜像下载&#xff1a;https://www.centos.org/download/ 选择合适的架构&#xff0c;博主选择x86_64&#xff0c;表示CentOS7 64位系统x86架构&#xff0c;如下&#xff1a; 或者直接访问以下网站下载 清华大学开源软件镜像站&#xff1a;https://mirrors.tuna.tsin…

LeetCode-199. 二叉树的右视图【树 深度优先搜索 广度优先搜索 二叉树】

LeetCode-199. 二叉树的右视图【树 深度优先搜索 广度优先搜索 二叉树】 题目描述&#xff1a;解题思路一&#xff1a;广度优先搜索解题思路二&#xff1a;深度优先搜索解题思路三&#xff1a;0 题目描述&#xff1a; 给定一个二叉树的 根节点 root&#xff0c;想象自己站在它…