vue快速入门(四)v-html

注释很详细,直接上代码

上一篇

新增内容

使用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>

效果演示

相关推荐
随风一样自由5 小时前
【前端独角兽】刚进入前端领域的前端开发用jQuery还是Vue3?
前端·javascript·vue3·jquery
IMPYLH6 小时前
HTML 的 <data> 元素
前端·html
YHHLAI6 小时前
[特殊字符] 面试中的 Promise —— 从入门到精通
前端·javascript·面试
leoZ2318 小时前
Claude 驱动的全栈开发:Spring Boot + Vue 的 BS 架构实践
vue.js·spring boot·架构
kyriewen8 小时前
我扒了 GPT-5.6 的全部编程跑分——有一项 OpenAI 没敢放出来
前端·gpt·ai编程
前端H9 小时前
微前端 v3 架构升级:从加载隔离到状态协同
前端·架构·状态模式
UndefeatedJie10 小时前
全栈项目架构三支柱:模块化 × RESTful × 语义化HTML,附AI辅助开发心法
html
陆枫Larry10 小时前
小程序包体积优化:用 SVG 图片替换 iconfont,并保留 CSS 控色能力
前端
凌奕10 小时前
Claude Code 上线了"一键发网页"功能:报告做完直接甩链接,部署这一步彻底消失
html·claude
环境栈笔记11 小时前
多账号浏览器选型检查清单:Profile、权限、Session 和任务日志怎么评估
前端·人工智能·后端·自动化