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类继承机制的原理分析
Sep 12 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
完美的js图片轮换效果
Feb 05 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
jQuery冲突问题解决方法
Jan 19 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
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php自动加载方式集合
2016/04/04 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
Python3多线程操作简单示例
2018/05/22 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
结婚周年感言
2014/02/24 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书