vue中插值v-once,v-text,v-html有什么用-创新互联

这篇文章将为大家详细讲解有关vue中插值v-once,v-text, v-html有什么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观,专业网站建设服务10余年为成都iso认证小微创业公司专业提供企业网站建设营销网站建设商城网站建设手机网站建设小程序网站建设网站改版,从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

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

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

1:插值

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

html:


没有v-once, {{msg}}

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:

 
   插值:
   {{msg}}

   

v-once:当数据改变时,插值处的内容不会更新

   {{msg}}  

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:

 
   v-text:
   
   原始 HTML:v-html指令      

js:

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

结果:

vue中插值v-once,v-text, v-html有什么用

关于“vue中插值v-once,v-text, v-html有什么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页名称:vue中插值v-once,v-text,v-html有什么用-创新互联
文章位置:http://hbruida.cn/article/dgjegg.html