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表单常用验证集合
Jan 16 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
jQuery文字轮播特效
Feb 12 Javascript
JavaScript多种页面刷新方法小结
Apr 04 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
搜索附近的人PHP实现代码
2018/02/11 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
validator验证控件使用代码
2010/11/23 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
node.js基础知识汇总
2020/08/25 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
python与C互相调用的方法详解
2017/07/14 Python
python中的随机函数小结
2018/01/27 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
毕业生自荐信格式
2014/03/07 职场文书
说明书范文
2014/05/07 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
会议营销主持词
2015/07/03 职场文书
九不准学习心得体会
2016/01/23 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS