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 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
canvas实现钟表效果
Feb 13 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
JavaScript模块详解
Dec 18 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
JavaScript Array对象使用方法解析
Sep 24 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
thinkphp实现分页显示功能
2016/12/03 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
python super的使用方法及实例详解
2019/09/25 Python
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
信息员培训方案
2014/06/12 职场文书
临床专业自荐信
2014/06/22 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js