vue指令

2024-07-09 22:59| 来源: 网络整理| 查看: 265

vue指令——插值表达式{{}} 基本使用

vue中，使用{{}}双花括号，在html标签的“内容区域”中表现数据，这个技术称为插值表达式。

语法：

表达式：变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等。

在JavaScript中，有返回实在信息的是表达式，没有返回实在信息(undefined)的是语句。

使用示例：

{{ msg }} {{ 500 }} {{ score + 10 }} {{ score > 10 }} {{ score > 80 && age > 18 }} {{ age > 18 ? '成年' : '少年' }} var vm = new Vue({ // delimiters:['$','#'], el:'#app', data:{ msg:'数据', score: 90, age:20 } })

如果{{}}使用中有冲突，想更换为其他标记，可以这样：

delimiters:['${'，'}$'] // 标记符号变为${ }$

注意：

在插值表达式中，只能设置简单的javascript表达式，不能设置复杂的表达式(例如for循环)。在data值大小不改变的前提下，可以进行一般的算术运算、比较运算、逻辑运算、三元操作符等运算使用，也可以通过常量进行数据体现。插值表达式只能用在html标签的内容区域，不能用在其他地方。{{}}花括号与变量之间为了美观，通常表达式左右各一个空格。插值表达式-闪烁及解决

插值表达式使用时，页面加载时出现会闪烁问题。

v-text与插值表达式 {{}} 都可以操控标签内容区域，但是他们有区别：网速非常慢时，{{}}插值表达式有闪烁问题，而 v-text没有(属性本身是不会显示出来的)。网速非常慢时，{{ }}花括号等原生内容在 Vue编译期间会在浏览器中短时显示。在这里插入图片描述

解决方法：v-cloak：

v-cloak

v-cloak 可以隐藏未编译的 Mustache 标签直到vue实例编译结束。

/* 通过属性选择器，选择到带有属性 v-cloak 的标签让其隐藏*/ [v-cloak]{ /* 元素隐藏 */ display: none; } {{msg}}

【本文地址】

公司简介

联系我们