vue 插值 v-once,v-text, v-html详解


Posted in Javascript onJanuary 19, 2018

引入Vue.js ,通过script形式,vue官网语法记录

创建vue应用,数据和 DOM 已经被建立了关联,所有东西都是响应式的

1:插值

缺点:让你的网速慢,或者数据加载失败时,会在浏览器中直接渲染插值【js禁用,javascript报错也会导致这个问题】

html:

<section id="content">
<p id="Mustache">没有v-once, {{msg}}</p>
</section>

js:

var vm = new Vue({
     el:"#content",
     data: {
       msg: "hello my lord"
     }
   });

result:

vue 插值 v-once,v-text, v-html详解

2:v-once:通过使用 v-once 指令,执行一次性的插值【当数据改变时,插值处的内容不会继续更新】

html:

<section id="content">
   插值:
   <p id="Mustache">{{msg}}</p>
   <p>v-once:当数据改变时,插值处的内容不会更新</p>
   <span v-once>{{msg}}</span>
 </section>

js:

var vm = new Vue({
     el:"#content",
     data: {
       msg: "hello once"
     }
   });

result:

vue 插值 v-once,v-text, v-html详解

3、v-text和v-html

html:

<section id="content">
   v-text:
   <span v-text="tipHtml"></span><br>
   原始 HTML:v-html指令
   <span v-html="tipHtml"></span>
 </section>

js:

var vm = new Vue({
    el:"#content",
    data: {
      tipHtml: "<b>小心点,明天</b>"
    }
  });

结果:

vue 插值 v-once,v-text, v-html详解

总结:v-text:会把html标签也解析为文本,而v-html可以解析html标签。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
深入理解js中this的用法
May 28 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
处理canvas绘制图片模糊问题
May 11 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 #Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 #Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 #jQuery
解决js ajax同步请求造成浏览器假死的问题
Jan 18 #Javascript
js实时监控文本框输入字数的实例代码
Jan 18 #Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 #Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 #Javascript
You might like
虫族 Zerg 历史背景
2020/03/14 星际争霸
php中文本操作的类
2007/03/17 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
javascript 闭包详解
2015/02/15 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
python tornado微信开发入门代码
2018/08/24 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
接待员岗位责任制
2014/02/10 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
先进个人事迹材料
2014/12/29 职场文书
旷课检讨书
2015/01/26 职场文书
2015年教研工作总结
2015/05/23 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL