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数组定义方法
Sep 10 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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书写安全的脚本代码
2012/02/05 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
js三种排序算法分享
2012/08/16 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
Vue中的异步组件函数实现代码
2018/07/20 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python字典的常用方法总结
2019/07/31 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
2015年防灾减灾工作总结
2015/07/24 职场文书
英语教学课后反思
2016/02/15 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android