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 XML实现两级级联下拉列表
Nov 10 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
简单的jQuery入门指引
Jul 28 Javascript
js微信分享API
Oct 11 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 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用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
python快速排序代码实例
2013/11/21 Python
python sys模块sys.path使用方法示例
2013/12/04 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
python在不同条件下的输入与输出
2020/02/13 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
咖啡厅创业计划书范本
2014/01/22 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
团日活动总结范文
2014/04/25 职场文书
社会实践活动总结
2015/02/05 职场文书
廉洁自律个人总结
2015/02/14 职场文书