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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
AngularJS Module方法详解
Dec 08 Javascript
layui弹出层效果实现代码
May 19 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
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框架的性能
2008/01/10 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
对python的bytes类型数据split分割切片方法
2018/12/04 Python
python3去掉string中的标点符号方法
2019/01/22 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
jupyter notebook清除输出方式
2020/04/10 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
师德师风建设整改措施思想汇报
2014/10/11 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
带你了解Java中的ForkJoin
2022/04/28 Java/Android
Spring Boot实现文件上传下载
2022/08/14 Java/Android