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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
Javascript自定义事件详解
Jan 13 Javascript
React Router基础使用
Jan 17 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php查询及多条件查询
2017/02/26 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python解决八皇后问题示例
2018/04/22 Python
python tornado微信开发入门代码
2018/08/24 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
Python实现异步IO的示例
2020/11/05 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
员工生日活动方案
2014/08/24 职场文书
学校交通安全责任书
2014/08/25 职场文书
个人总结与自我评价
2014/09/18 职场文书
办理收楼委托书范本
2014/10/09 职场文书
村党建工作汇报材料
2014/11/02 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python