vue.js使用v-pre与v-html输出HTML操作示例


Posted in Javascript onJuly 07, 2018

本文实例讲述了vue.js使用v-pre与v-html输出HTML操作。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>3water.com vue.js输出HTML</title>
  <!-- Vue.js -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
  <!--# 如果想显示{{ }}标签,而不进行替换,使用v-pre即可调过这个元素和它的子元素的编译过程 #-->
  <span v-pre>{{ 这里的内容不会被编译 }}</span>
  <span v-html="link"></span>
</div>
</body>
</html>
<script>
  var myData = {
    link:'<a href="#" rel="external nofollow" >这是一个连接</a>'
  };
  var app = new Vue({
    el:'#app',
    data:myData
  })
</script>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

vue.js使用v-pre与v-html输出HTML操作示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
js 操作select相关方法函数
Dec 06 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 #Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 #Javascript
react-native动态切换tab组件的方法
Jul 07 #Javascript
vue.js 实现点击展开收起动画效果
Jul 07 #Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 #Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 #Javascript
小程序实现发表评论功能
Jul 06 #Javascript
You might like
利用php绘制饼状图的实现代码
2013/06/07 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
使用prototype.js进行异步操作
2007/02/07 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
记录Django开发心得
2014/07/16 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python实现自动发送报警监控邮件
2018/06/21 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python数据库小程序源代码
2019/09/15 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
美容师的职业规划书
2013/12/27 职场文书
司法局火灾防控方案
2014/06/05 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
单位作风建设自查报告
2014/10/23 职场文书
幼师辞职信范文
2015/02/27 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL