vue中v-text / v-html使用实例代码详解


Posted in Javascript onApril 02, 2019

废话少说,代码如下所述:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实例中的数据,事件和方法</title>
</head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
  
  <div id="root">
    <h1 v-text="number"></h1>
  </div>

  <script type="text/javascript">
    new Vue({ 
      el:"#root",
      data:{
        msg: "world",
        number:123
      }
    })
  </script>
</body>
</html>

显示123

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实例中的数据,事件和方法</title>
</head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
  <div id="root">
    <h1 v-html="content"></h1>
  </div>
  <script type="text/javascript">
    new Vue({ 
      el:"#root",
      data:{
        content: "<h1>hello world</h1>",
      }
    })
  </script>
</body>
</html>

补充:vuejs {{}},v-text 和 v-html的区别

<div id="app">
<p>{{message}}</p> <!-- 输出:<span>通过双括号绑定</span> -->

<p v-html="html"></p> <!-- 输出:html标签在渲染的时候被解析 -->

<p v-text="text"></p> <!-- 输出:<span>html标签在渲染的时候被源码输出</span> -->
</div>


<script>

let app = new Vue({

el: "#app",

data: {


message: "<span>通过双括号绑定</span>",


html: "<span>html标签在渲染的时候被解析</span>",


text: "<span>html标签在渲染的时候被源码输出</span>",

}
 });
</script>

区别:

{{message}}:将数据解析为纯文本,不能输出真正的html,在页面加载时显示{{}},所以通常使用v-html和v-text代替,且花括号方式在以后可能被取消

v-html="html":输出真正的html

v-text="text":将数据解析为纯文本,不能输出真正的html,与花括号的区别是在页面加载时不显示{{}}

总结

以上所述是小编给大家介绍的vue中v-text / v-html使用实例代码详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
bootstrap table表格插件使用详解
May 08 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
vue中的scope使用详解
Oct 29 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
Seajs源码详解分析
Apr 02 #Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 #Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 #Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 #Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 #Javascript
详解vue后台系统登录态管理
Apr 02 #Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 #Javascript
You might like
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
javascript 闭包详解
2015/02/15 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
python加载自定义词典实例
2019/12/06 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
物业管理员岗位职责范文
2013/11/25 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
业务员辞职信范文
2015/03/02 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
python如何获取网络数据
2021/04/11 Python