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 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
Bootstrap实现模态框效果
Sep 30 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利用反射实现插件机制的方法
2015/03/14 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
js document.write()使用介绍
2014/02/21 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
vue中appear的用法
2017/08/17 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
python之import机制详解
2014/07/03 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python中psutil的介绍与用法
2019/05/02 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
老师的检讨书
2014/02/23 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
导游词之昭君岛
2020/01/17 职场文书