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 21 Javascript
让Firefox支持event对象实现代码
Nov 07 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 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合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
Grid得到选择行数据的方法总结
2011/01/17 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
js中的闭包学习心得
2018/02/06 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
JS实现json数组排序操作实例分析
2019/10/28 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
python3序列化与反序列化用法实例
2015/05/26 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Python eval函数介绍及用法
2020/11/09 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
美国高街时尚品牌:OASAP
2016/07/24 全球购物
文明餐桌行动实施方案
2014/02/19 职场文书
自荐信的格式
2014/03/10 职场文书
《将心比心》教学反思
2016/02/23 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python