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>

效果演示

相关推荐
Sgf22715 分钟前
如何阅读 React 源码:系统化学习指南
前端·react.js·前端框架
李剑一22 分钟前
解决 Cesium 网络卡顿!5 分钟加载天地图,内网也能流畅用,附完整代码
前端·vue.js·cesium
QD_ANJING32 分钟前
3月面大厂前端岗总结笔记(含答案)
前端·javascript·笔记·面试·职场和发展·前端框架·pdf
YimWu36 分钟前
面试官:OpenCode Prompt 系统了解吗?
前端·agent·ai编程
百锦再1 小时前
复杂查询中基于代价的连接条件下推实践与思考
前端
广州华水科技1 小时前
如何实现高精度的单北斗GNSS位移监测系统安装?
前端
肉肉不吃 肉1 小时前
Vue Router 路由模式
前端·javascript·vue.js
北寻北爱1 小时前
Vue-Router
前端·javascript·vue.js
肉肉不吃 肉1 小时前
什么是闭包
前端·javascript
窝子面1 小时前
十六、按钮组件
前端