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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
javascript中的replace函数(带注释demo)
Jan 07 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写的小东西
2006/12/06 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
python实现顺时针打印矩阵
2019/03/02 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
行政前台岗位职责
2013/12/04 职场文书
生产内勤岗位职责
2013/12/07 职场文书
劳资人员岗位职责
2013/12/19 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
活动志愿者自荐信
2014/01/27 职场文书
相亲大会策划方案
2014/06/05 职场文书
早读课迟到检讨书
2014/09/25 职场文书
销售员岗位职责范本
2015/04/11 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android