编程 Javascript

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程序设计有所帮助。

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

- Author -

_code小学生

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript parseInt 大改造

Sep 27 Javascript

JQuery的一些小应用收集

Mar 27 Javascript

DIV+CSS+JS不间断横向滚动实现代码

Mar 19 Javascript

js操作label给label赋值及取label的值示例

Nov 07 Javascript

Javascript判断图片尺寸大小实例分析

Jun 16 Javascript

深入理解JavaScript系列（36）：设计模式之中介者模式详解

Mar 04 Javascript

js支持键盘控制的左右切换立体式图片轮播效果代码分享

Aug 26 Javascript

jQuery实现ajax调用WCF服务的方法(附带demo下载)

Dec 04 Javascript

JQuery对ASP.NET MVC数据进行更新删除

Jul 13 Javascript

react-native使用react-navigation进行页面跳转导航的示例

Sep 07 Javascript

javascript 删除select中的所有option的实例

Sep 17 Javascript

浅谈Vue响应式(数组变异方法)

May 07 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