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>

效果演示

相关推荐
前端snow3 分钟前
记录:非常典型的一个redux问题
前端
慧一居士12 分钟前
src/App.vue 和 public/index.html 关系和区别
前端·vue.js
九十一38 分钟前
websocket的连接原理
前端·javascript
念你那丝微笑1 小时前
vue实现批量导出二维码到PDF(支持分页生成 PDF)
前端·vue.js·pdf
Renounce1 小时前
《Android Handler:线程间通信的核心实现》
前端
CAD老兵1 小时前
打造高性能二维图纸渲染引擎系列(一):Batched Geometry 助你轻松渲染百万实体
前端·webgl·three.js
前端老宋Running1 小时前
微信小程序的操作日志收集模块
前端
CAD老兵1 小时前
打造高性能二维图纸渲染引擎系列(三):高性能 CAD 文本渲染背后的隐藏工程
前端·webgl·three.js
不太会写1 小时前
又开始了 小程序定制
vue.js·spring boot·python·小程序
CAD老兵1 小时前
打造高性能二维图纸渲染引擎系列(二):创建结构化和可扩展的渲染场景
前端·webgl·three.js