vue插值表达式和v-text指令的区别

目录
  • 1.使用插件表达式
  • 2.在插件表达式中使用v-cloak解决闪烁问题
  • 3.插件表达式

{{message}} 语法只能在标签内容中使用

{{}}这种语法叫做插值表达式，在插值表达式中可以写任何合法的js表达式

1.使用插件表达式

使用插件表达式，存在内容闪烁问题，但是v-text没有闪烁问题

<div id="app">

    <p>

        {{message}}

    </p>
   <p v-text="message"></p>

</div>

<script src="./js/vue.js"></script>
<script>

    let vm = new Vue({

        el:"#app",  

        data:{ 

        message:"hello vue"

    }

    })

</script>

在上面这段代码中，如果正常输出的话结果是一致的。

但是如果网速比较慢的话，插件表达式则会先在页面上输出

{{message}}

随后才会正常渲染页面，这样的效果对用户体验是不够好的。

2.在插件表达式中使用v-cloak解决闪烁问题

<style>

    [v-cloak]:{

    display:none;

}

</style>

<div id="app">

    <p v-cloak>

        {{message}}

    </p>

    <p v-text="message"></p>

</div>

<script src="./js/vue.js"></script>

我们可以使用v-cloak属性在运行时让其隐藏，但因为在运行结束时vue会自动删除v-cloak属性

所以可以用这种方法来解决闪烁问题

3.插件表达式

插件表达式只会插入内容，不会覆盖原本的内容，而v-text会覆盖掉原先的内容

<div id="app">

    <p>

        ----{{message}}----

    </p>

    // ----hello vue----

    <p v-text="message">1234556</p>

    // hello vue

</div>

<script src="./js/vue.js"></script>
<script>

    let vm = new Vue({

        el:"#app",

         data:{
       message:"hello vue"
    }
    })

</script>

到此这篇关于vue插值表达式和v-text指令的区别的文章就介绍到这了,更多相关vue插值表达式和v-text指令的区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue v-text指令简单使用方法示例

    Vue v-text指令简单使用方法示例

    本文实例讲述了Vue v-text指令简单使用方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-text</title> <script type="text/javascript" src="https://cdn.bootc

  • vue中{{}},v-text和v-html区别与应用详解

    vue中{{}},v-text和v-html区别与应用详解

    {{}}获取值,不会清空标签原有内容 v-text 获取值,会清空标签原有内容,输出的是纯文本 v-html 获取值,会清空标签原有内容,若数据中包含html标签,将其当html标签解析后输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <

  • vue学习笔记之指令v-text && v-html && v-bind详解

    vue学习笔记之指令v-text && v-html && v-bind详解

    一 : 指令的概念: 指令是vue自定义的以v-开头的自定义属性.每个不同的属性都有各自不同的意义和功能 二 : 指令的语法: v-指令名 = "表达式判断或者是业务模型中属性名或者事件名" 三 : 具体指令 1. v-text 作用 : 操作元素中的纯文本 快捷方式 : {{}} 栗子1 简写形式:将v-text=""换成{{}} <div id="app"> {{ message }} </div> var app =

  • vue2 v-model/v-text 中使用过滤器的方法示例

    Vue.js 允许自定义过滤器,一般可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 v-bind 中 --> <div v-bind:id="rawId | formatId"></div> 可以在一

  • vue中v-text / v-html使用实例代码详解

    废话少说,代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例中的数据,事件和方法</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><

  • vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

    vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

    本文实例讲述了vue防止花括号{{}}闪烁v-text和v-html.v-cloak用法.分享给大家供大家参考,具体如下: 一.v-text和v-html <span>{{msg}}</span>  -->     v-text {{{msg}}}      -->    v-html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

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

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

    引入Vue.js ,通过script形式,vue官网语法记录 创建vue应用,数据和 DOM 已经被建立了关联,所有东西都是响应式的 1:插值 缺点:让你的网速慢,或者数据加载失败时,会在浏览器中直接渲染插值[js禁用,javascript报错也会导致这个问题] html: <section id="content"> <p id="Mustache">没有v-once, {{msg}}</p> </section>

  • Vue指令之 v-cloak、v-text、v-html实例详解

    v-cloak 当用户频繁刷新页面或网速慢时,页面未完成 Vue.js 的加载时,导致 Vue 来不及渲染,这就会导致在浏览器中直接暴露插值(表达式),Vue由此也给出了解决方法. 在指定标签或整个父容器加入v-cloak指令,通过css选择器选中v-cloak,隐藏元素即可. // html <div v-cloak id="app"> <span>{{ msg }}</span> </div> // css [v-cloak]{ di

  • vue插值表达式和v-text指令的区别

    目录 1.使用插件表达式 2.在插件表达式中使用v-cloak解决闪烁问题 3.插件表达式 {{message}} 语法只能在标签内容中使用 {{}}这种语法叫做插值表达式,在插值表达式中可以写任何合法的js表达式 1.使用插件表达式 使用插件表达式,存在内容闪烁问题,但是v-text没有闪烁问题 <div id="app"> <p> {{message}} </p> <p v-text="message"></

  • 简单了解vue 插值表达式Mustache

    一.本节说明 用样例详细的说明插值表达式{{}}的使用,将模型数据插入到页面当中. 插值表达式为什么叫Mustache(英文:八字须)呢?看看{{内容}}的两个大括号像不像八字胡子呢! 二.怎么做 <div id="app" style="background-color:aquamarine"> <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式--> <h2>{{firstName.length}}(使

  • Vue插值、表达式、分隔符、指令知识小结

    最近打算重温一遍vue的知识,正好总结一份笔记. 插值 基本用法 <span>Text:{{text}}</span> <span v-text="text"></span> 这个属于指令 <li data-id="{{id}}"></li> 有时候只需要渲染一次数据,后续数据变化不再关心,可以通过"*"实现 <span>Text:{{*text}}</sp

  • vue实例成员 插值表达式 过滤器基础教程示例详解

    vue实例成员 插值表达式 过滤器基础教程示例详解

    目录 一. 什么是Vue 二.为什么学Vue 三.如何使用Vue 下载安装? 插值表达式 四.vue特点 1.虚拟DOM 2.数据的双向绑定 3.单页面应用 4.数据驱动 五.Vue实例 六.实例成员 - 挂载点 | el - 自定义插值表达式括号| delimiters - 数据 | data - 过滤器 | filters - 方法 | methods - js对象(即字典)补充 - 插值表达式转义 | delimters - 计算属性 | computed - 监听属性 | watch 一

  • 八个Vue中常用的v指令详解

    八个Vue中常用的v指令详解

    目录 Vue中常用的8种v指令 1 v-text 指令 2 v-html 指令 3 v-on 指令 案例:计数器 4 v-show 指令 5 v-if 指令 6 v-bind 指令 7 v-for 指令 8 v-on 补充 总结 Vue中常用的8种v指令 根据官网的介绍,指令 是带有 v- 前缀的特殊属性.通过指令来操作DOM元素 指令 功能 v-text=“变量/表达式” 文本的设置字符串变量+数字可以直接写是拼接字符串如果出现要使用外部不相同的引号 v-html=“变量” 文本或者页面的设置

  • 解决vue组件中使用v-for出现告警问题及v for指令介绍

    解决vue组件中使用v-for出现告警问题及v for指令介绍

    在项目中运行v-for代码段时, <flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> <flexbox-item v-for="role in roles " > <x-button mini :type="role.type" style="padding: 0 14px" @clic

  • Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

    在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失,最近研究了一下这个问题的原因和解决办法,这里和大家分享一下. 1.闪现的原因 这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况.因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue才会执行相应的JS代码. 2.解决的办法 其实在了解了原因之后我们就有了大概的思路,既然是在JS执行之前会出

  • vue如何解决数据加载时,插值表达式闪烁问题

    vue如何解决数据加载时,插值表达式闪烁问题

    目录 数据加载,插值表达式闪烁问题 1.在公共的css样式中加入 2.在el挂载的标签上添加 解决插值表达式渲染数据闪动 先看代码 出现的问题 解决方法如下图 数据加载,插值表达式闪烁问题 1.在公共的css样式中加入 [v-cloak] {     display: none !important; } 2.在el挂载的标签上添加 <div class="#app" v-cloak>     <p>{undefined{value.name}}</p&g

  • vue基础语法之插值表达式详解

    vue基础语法之插值表达式详解

    目录 一.vscode插件介绍 二.插值表达式介绍 三.插值表达式示例1 四.插值表达式示例2 五.插值表达式注意点 六.插值表达式补充 总结 一.vscode插件介绍 在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击刷新,插件会帮我们自动进行刷新,是不是非常方便,提高了我们的开发效率,节省了我们每次修改代码都要点击一次刷新的操作. 安装步骤如下图所示:安装Live Se

  • Vue.JS入门教程之自定义指令

    基础 Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令.定义对象需要提供一些钩子函数(全部可选): bind: 仅调用一次,当指令第一次绑定元素的时候. update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值:以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数. unbind:仅调用一

随机推荐