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 相关文章推荐
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
深入理解js中this的用法
May 28 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
省级优秀毕业生主要事迹
2014/05/29 职场文书
2014年消防工作总结
2014/11/21 职场文书
会计人员岗位职责
2015/02/03 职场文书
学校党支部承诺书
2015/04/30 职场文书
微观世界观后感
2015/06/10 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android