精华内容
下载资源
问答
  • vue中插值表达式闪烁问题怎么解决?
    2021-05-24 21:13:11

    vue插值表达式闪烁问题

    当页面加载或是刷新的时候,会出现这样一种现象:{{插值表达式}}先出现在页面中,虽然只有一瞬间,但是会影响到用户的体验,尤其是在网络较慢是尤其明显。造成这种现象的原因是vue要在HTML dom加载之后再去执行js 代码。
    解决办法如下:

    1. 在style标签中设置样式,将绑定了v-clock指令的元素隐藏,直到js代码执行
    <style>
    	[v-clock] {
    		display:none;
    	}
    </style>
    <div v-clock>{{ message }}</div>
    
    更多相关内容
  • vue中插值表达式和14个vue指令详解

    千次阅读 2020-03-29 15:27:28
    在学习vue时,插值表达式和vue指令可谓是基础中的基础,这篇文章,就让你...可以将vue中的数据填写在插值表达式中 <div id="app">{{ title }}</div> <script> const vm = new Vue({ el:"#app"...

    在学习vue时,插值表达式和vue指令可谓是基础中的基础,这篇文章,就让你彻底了解怎么使用插值表达式和vue中所有指令的用法。

    一、插值表达式:{{ }}

    • 可以将vue中的数据填写在插值表达式中
    <div id="app">{{ title }}</div>
    
    <script>
       const vm = new Vue({
           el:"#app",
           data:{
               title:"the first vue"
           }
       }) 
    </script>
    
    • 也可以直接填写数值、数组、对象等。
    <div id="app">{{ 123 }}</div>
    
    • 可以填写表达式,但是不能写流程语句。
    <div id="app">
        {{ 100*2 }}
    	{{ 1 + 1 === 2 ? "是的" : "不是" }}
    </div>
    
    • 注意:尽量中间加上空格,否则遇到一个对象的时候,会报错。也不能使用未声明的变量。
    <div id="app">{{{a:1}}}</div>
    //Error compiling template
    

    二、vue中的指令

    1、v-pre

    • v-pre:不使用vue语法进行渲染,跳过元素和他的子元素的编译过成。
     <div v-pre>{{ title }}</div>
    // {{ title }}
    

    2、v-cloak

    • v-cloak:当元素在编译时存在,当元素编译完成后,该指令消失。通常解决首屏闪烁。
    [v-cloak] {
      display: none;
    }
    
    <div v-cloak>{{ title }}</div>
    

    3、v-once

    • v-once:只渲染一次,之后的重新渲染,元素及其所有的子节点将被视为静态内容并跳过。因为它使用缓存中的值,不再使用vm中的值,数据也就不再变化。
    <div v-once>{{ title }}</div>
    

    4、v-html

    • v-html:相当于 innerHTML 。内容按普通 HTML 插入,不会作为 Vue 模板进行编译 。

      注意:小心XXS攻击,在可信内容上使用v-html,拒绝用户交互下使用该指令

    <div v-html="title"></div>  // the first vue {{ name }}
    
    <script>
       const vm = new Vue({
           el:"#app",
           data:{
               title:"the first vue {{ name }}",
               name:"lkx"
           }
       }) 
    </script>
    

    5、v-text

    • v-text:相当于 textContent

    注意v-text会替换元素中所有的文本,插值表达式只替换自己,不会清空元素。优先级比插值表达式高。

    <div v-text="title"></div>
    <!-- 和下面的效果一样 -->
    <div>{{ title }}</div>
    

    补充dom.innerTextdom.textContent

    1. 设置文本替换时,两者都会把指定节点下的所有子节点也一并替换掉。
    2. innerText 受 CSS 样式的影响,并且不会返回隐藏元素的文本,而textContent会。
    3. 由于 innerText 受 CSS 样式的影响,它会触发重排(reflow),但textContent 不会。
    4. textContent 会获取所有元素的内容,包括 <script><style>元素,但innerText不会

    6、v-if

    7、v-else-if

    8、v-else

    • v-if:控制元素的显示和隐藏,通过对元素的添加和删除。可以作用在template上。

    • v-else-if:控制元素显示和隐藏。前一个兄弟元素必须有v-if

    • v-else:前一个兄弟元素必须有v-ifv-else-if

    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A、B、C
    </div>
    

    9、v-show

    • v-show:控制标签的显示和隐藏,通过操作display:none|block属性控制显示和隐藏,v-show对template标签不起作用,显而易见是因为template标签,没有任何意义,也不会渲染到页面中,只是为了方便填写指令出现的。
    <div v-show="isShow">{{ title }}</div>
    

    注意v-if 是惰性的,如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。v-show则不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。v-if有更高的切换开销,v-show有更高的初始渲染开销,如果需要频繁切换,v-show比较好,如果改变少,则v-if更好。

    10、v-bind

    • v-bind:动态绑定一个或多个特性值,或用:缩写。:后面的时参数,例如:v-bind:src="imgSrc"src就是参数
    <!-- 绑定一个属性 -->
    <img v-bind:src="imgSrc">
    
    <!-- 动态特性名 (2.6.0+) -->
    <button v-bind:[key]="value"></button>
    
    <!-- 缩写 -->
    <img :src="imgSrc">
    
    <!-- 动态特性名缩写 (2.6.0+) -->
    <button :[key]="value"></button>
    
    <!-- 内联字符串拼接 -->
    <img :src="'/img/' + fileName">
    
    <!-- 没有参数,绑定一个对象,键值会变为特性名和值 -->
    <img v-bind="{src:'a.jpg'}>
    

    使用v-bind绑定classstyle

    绑定class:绑定class并非覆盖原来的class,只是在原来的基础上添加

    1. 对象语法:是否使用red类名,取决于isRed变量的真假
    <div v-bind:class="{ red: isRed }"></div>
    
    1. 数组语法:我们可以把一个数组传给 v-bind:class,以应用一个 class 列表
    <div v-bind:class="[classA, classB]"></div>
    

    注意

    • 在数组语法中可以使用三元表达式来切换class
    <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
    
    • 在数组语法中可以使用对象语法
    <div v-bind:class="[classA, { classB: isB, classC: isC }]">
    <div v-bind:class="classA" class="red">
    
    • v-bind:class 可以与普通 class 共存
    <div v-bind:class="classA" class="red">
    

    绑定style

    1. 对象语法:看着比较像CSS,但其实是一个JavaScript对象
    <div v-bind:style="{ fontSize: size + 'px' }"></div>
    <script>
       const vm = new Vue({
           el:"#app",
           data:{
               size: 30
           }
       }) 
    </script>
    
    <!-- 等同于下面写法 -->
    <div v-bind:style="styleObject"></div>
    <script>
       const vm = new Vue({
           el:"#app",
           data:{
               styleObject: {
                    fontSize: '13px'
      		   }
           }
       }) 
    </script>
    
    1. 数组语法:可以将多个样式对象应用到同一个元素
    <div v-bind:style="[styleObjectA, styleObjectB]"></div>
    

    注意:

    1. 自动添加前缀。在绑定style时,使用需要添加浏览器引擎前缀的CSS属性时,Vue.js会自动侦测并添加相应的前缀。

    2. CSS属性名可以用驼峰式或者短横线分隔来命名。但是使用短横线分隔时,要用引号括起来

    <div :style="{color:'red',width:'100px','background-color':'#ccc'}"></div>
    <!-- background-color 必须加上引号,或者写成backgroundColor 驼峰命名法 -->
    

    v-bind的指令修饰符

    1. .camel:特性会将大写字符转换成小写字母,camel解决这种问题,用-链接符会变为驼峰命名法
    <svg :view-box.camel="viewBox"></svg>
    <!-- 被渲染为 -->
    <svg viewBox="xxxx"></svg>
    
    1. .prop:直接使用dom中的属性,给属性赋值
    <div v-bind:text-content.prop="title"></div>
    <!-- 相当于 -->
    document.getElementsByTagName("div")[0].textContent = title
    

    11、v-on

    • v-on:事件监听,并触发绑定的JavaScript代码,可以用@简写
    <div id="app">
      <button v-on:click="add(1,$event)">点击</button>
      <p>按钮被点击了 {{ counter }} 次</p>
    </div>
    
    <script>
        new Vue({
          el: '#app',
          data: {
            counter: 0
          },
          methods: {
            add: function (num,e) {
              console.log(e)
              this.counter += 5;
            }
          }
        }) 
    </script>
    

    注意:填写多个参数时,可以用$event获取事件对象

    v-on指令的修饰符

    • .stop 阻止冒泡行为。点击按钮只会输出button
     <div id="app">
        <div @click="console('div')">
            <button @click.stop="console('button')">点击</button>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                console(str){console.log(str)}
            },
        })
    </script>
    
    • .prevent 阻止默认事件。会调用event.preventDefault(),组织默认事件。例如:下面点击提交按钮后,页面不会重载
    <div id="app">
      <form v-on:submit.prevent="onSubmit">
        <input type="submit">
      </form>
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                onSubmit(){console.log("提交操作...")}
            },
        })
    </script>
    
    • .capture 开启事件捕获模式。即事件从上向下依次执行,例如:点击按钮后,先输出div再输出button
    <div id="app">
      <div @click.capture="console('div')">
        <button @click="console('button')">点击</button>
      </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                console(str){console.log(str)}
            },
        })
    </script>
    
    • .self 只当事件是从侦听器绑定的元素本身触发时才触发回调。就是点击自己的时候才执行,不会因为冒泡或其他捕获时执行。
    <div id="app">
        <div  @click.self="console('div')">
            <button @click="console('button')">点击</button>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                console(str){console.log(str)}
            },
        })
    </script>
    
    • .once 只执行一次,多次点击无效,太简单了,不举例了。

    • .passive 不阻止默认事件 。并要注意不要把 .passive.prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。

    <div v-on:scroll.passive="onScroll">...</div>
    

    解释:passive是滚动行为的默认事件,只要滚动给就会立即执行,不会等到onScroll 完成。在触发触摸事件时,执行了一个空的函数,也会让页面卡顿。因为浏览器不知道监听器到底会不会阻止默认事件,所以浏览器要等到执行完整个函数后,才能决定是否要滚动页面。passive事件监听器,允许开发者告诉浏览器,监听器不会阻止默认行为,从而浏览器可以放心大胆的滚动页面,这样可以大幅度提升移动端页面的性能,因为据统计只有20%的触摸事件会阻止默认事件。

    我们还需要注意,修饰符的顺序也非常重要。相应的代码会以同样的顺序产生。例如:

    v-on:click.prevent.self :会阻止所有的点击的默认事件,而v-on:click.self.prevent :只会阻止对元素自身点击的默认事件

    v-on中的按键修饰符

    • 按键码修饰符

    下面的代码,只有当我们按下回车键时才会触发submit函数执行

    <input v-on:keyup.enter="submit">
    

    常用的按键码别名:.enter(回车键)、.tab(tab键)、.delete (捕获“删除”和“退格”键)、.esc
    .space.up.down.left.right

    也可以在全局自定义按键修饰符的别名,使用Vue.config.keyCodes对象

    Vue.config.keyCodes = {
    	'f1-key':112 //但需要使用-链接
    }
    

    v-on中鼠标按钮修饰符

    下面的代码,只有当我们按下鼠标右键时才会触发change函数执行

    <button v-on:click.right="change"></button>
    

    鼠标按钮修饰符只有三个.left.right.middle

    12、v-for

    • v-for:基于一个数据来渲染一个列表。

    在数组中v-for="(item, index) in items",其中item是被迭代的数据的别名,index是当前的索引(可选值),items是数据源。

    在对象中v-for="(value, key, index) in items",其中value是被迭代的数据的别名,key是键值(可选值),index是当前的索引(可选值),items是数据源。

    在使用v-for时,还需要指定一个唯一的key值,vue会根据key值找到对应的dom,会进行比对,如果发生变化,可以准确的进行更新,便于重排和重绘

    <div v-for="(item,index) in items" :key="item.id">
        {{ item }}
    </div>
    

    注意:不能把key值给template,必须要给真实的元素

    <template v-for="(item,index) in items">
        <div :key="`${key}_1`">{{ item }}</div>
        <span :key="`${key}_2`">{{ item }}</span>
    </template>
    

    注意:vue会为了尽可能的节省性能,当vue的发现两个dom相同时,就不会替换,会复用元素。如下,当切换时,input框不会替换,我们通常为input添加key值解决。

    <div v-if="flag">
        <label for="name">name</label>
        <input type="text">
    </div>
    <div v-else>
        <label for="name">age</label>
        <input type="text">
    </div>
    

    我们尽量不要将v-forv-if放在同一个元素上使用,因为v-for的优先级比v-if高,每一个dom元素都会进行相同的v-if判断,十分影响性能。

    13、v-model

    • v-model:表单元素的双向数据绑定。数据更新元素会更新、元素更新数据也会更新。本质上v-model是value和input事件的语法糖
    <div id="app">
        <input type="text" v-model="data"> {{ data }}
    </div>
    <script>
       const vm = new Vue({
           el:"#app",
           data:{
               data:""
           }
       }) 
    </script>
    

    其实底层就是通过控制value和input事件来实现的。如下:

    <div id="app">
    	<input type="text" :value="data" @input="inputHandle"> {{ data }}
    </div>
    <script>
        const vm = new Vue({
           el:"#app",
           data:{
               data:""
           },
           methods:{
               inputHandle(e){
                   this.data = e.target.value
               }
           }
        }) 
    </script>
    

    v-model在不同的表单元素上使用

    1. inputtextareavalue的值
    2. 在单选框中,为选中的value
    3. 在复选框中,是一个数组,每一项是选中的value
    4. 在下拉框中,单选下拉框是选中的option中的值,多选是一个数组,每一项是选中的option中的值

    v-model中的修饰符

    • .lazy:使用change事件而非input事件,如果不需要实时更新,则可以用.lazy
    • .trim:去掉前后的空格
    • .number:因为v-model绑定数据是一个字符串,会将数据中的字符串转为number类型

    14、v-slot

    • v-slot:插槽
    展开全文
  • 我们在学习vue的过程,对指令的学习是必不可少的,下面结合自己工作和学习的一点经验介绍下vue中插值表达式,v-text和v-html三者的区别 插值表达式 我们知道页面的加载时自上而下的,js加载是同步的。当页面刷新...

    概述


    我们在学习vue的过程中,对指令的学习是必不可少的,下面结合自己工作和学习的一点经验介绍下vue中插值表达式,v-text和v-html三者的区别

    插值表达式


    我们知道页面的加载时自上而下的,js加载是同步的。当页面刷新比较频繁或者网上较慢的时候,我们使用插值表达式页面会先出现‘{{message}}’,再用真实数据替换‘{{message}}’(模拟这种现象可以将vue.js的引入放在body的后面,或者调整网络请求的速度为3G)

    解决上述问题的办法v-cloak,这个指令可以隐藏未编译的标签直到实例准备完毕。不会显示,直到编译结束。

    此时我们去访问页面时候不再会出现‘{{message}}’,当Vue数据传递完成时,会正确显示数据。

    v-text

    显示效果与插值表达式一样,并且还不会出现‘{{message}}’闪烁现象,那么就有同学么要问有了v-text为什么还要插值表达式?通过下面代码为大家讲述两者区别:

    运行结果:
    在这里插入图片描述
    结论:插值表达式相当于一个占位符,只会替换掉其中的占位置的内容,v-text只能显示Vue对象传递过来的数据,会替换掉节点里已有的内容。

    v-html

    运行结果:

    结论:插值表达式和v-text不能够解析html标签,v-html能够解析html标签

    总结

    1. 如果只是单独展示Vue对象里的数据,建议使用“v-text”指令。
    2. 如果要同时展示用户前台数据,那么就需要用插值表达式,但是不要忘记和“v-cloak”属性一起使用(同时需要设置样式[v-cloak]{display:none;})。
    3. 如果Vue对象传递过来的数据含有HTML标签,则使用v-html
       
    展开全文
  • 1.插值表达式 数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值 <span>Message: {{ msg }}</span> msg的值会从data传递,而这就造成了在某种情况下的弊端: 当网络环境较差、...

    1.插值表达式

    数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值

    <span>Message: {{ msg }}</span>
    

    msg的值会从data中传递,而这就造成了在某种情况下的弊端

    当网络环境较差、网速较慢、刷新频繁的时候,插值表达式会出现{undefined{message}}的情况,(之后再用真实的数据替换掉)。因为页面加载是自上而下的,加载到表达式时,可能还没有解析到script标签中的data数据。

    解决方法

    • 使用v-clock解决屏幕闪动问题

      Vue提供了内置属性v-clock,这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,可以隐藏未编译的 Mustache 标签直到实例准备完毕。

    <p v-clock> {{msg}} </p>
    
    • 使用v-text或者v-html

    2.v-text

    <p v-clock> {{msg}} </p>
    <p v-text='msg'></p>
    

    v-text的显示效果与插值表达式一致,并且不会出现上述的屏幕闪动现象。那么v-text和插值表达式有什么具体的区别呢?

    <p v-clock> Message:{{msg}} </p>
    <p v-text='msg'>Message:</p>
    

    这里msg的值为ABCDEFG

    运行结果:
    在这里插入图片描述

    结论:
    插值表达式相当于一个占位符,只会替换掉占位置的内容。
    v-text只渲染Vue传递过来的数据,会替换掉节点内已有内容。
    因此需要根据需求判断是否需要同时展示。


    3.v-html

    双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

     	<p v-text='title'></p>
     	<p v-html='title'></p>
    
    	data:{
    		title:'<h1>我是h1标题</h1>'
    	}	
    

    运行结果:
    在这里插入图片描述

    结论:
    插值表达式和v-text不能够解析html标签,v-html能够解析html标签


    总结

    • 如果只是单独展示Vue对象里的数据,建议使用“v-text”指令。
    • 如果要同时展示用户前台数据,那么就需要用插值表达式,但是不要忘记和“v-cloak”属性一起使用(同时需要设置样式[v-cloak]{display:none;})。
    • 如果Vue对象传递过来的数据含有HTML标签,则使用v-html
    展开全文
  • 如果要同时展示用户前台数据,那么就需要用插值表达式,但是不要忘记和“v-cloak”属性一起使用(同时需要设置样式[v-cloak]{display:none;})。 如果Vue对象传递过来的数据含有HTML标签,则使用v-html ...
  • 一 、插值表达式 作用: 数据渲染语法 { { } }注: 中间可以写 算术运算 三元运算 拼接 不能写 分支 循环 声明变量 且 不能是data之外的自定义变量 二、vue指令 1. v-bind 用来 动态绑定标签上的属性值 语法: ...
  • 插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义: 通过Vue提供的指令即可很方便地将数据渲染到页面上 无需手动操作DOM元素了 Document {{msg}} var vm=new Vue({ el:#app, data:{ msg:Hello ...
  • 不需要表达式 用法: 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如== [v-cloak] { display: none }== 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 示例: [v-cloak] { ...
  • vue里的插值表达式

    2022-03-02 04:39:10
    小结
  • Vue插值&表达式

    2021-10-20 10:57:01
    1、插值,扩写一下是插入的数值,再联想一下就是数据绑定 2、使用双大括号{{ }},是最基础、最常见的文本插值。文 本插值会显示双向绑定的数据。要注意的是,这里只显示 对应数据的文本,文本的内容不会被...
  • vue插值表达式

    2019-12-08 22:52:19
    vue插值表达式 {{}} 有人叫小胡子语法,也叫双花括号 作用:读取vue中data里的数据,显示在结构,数据更新,视图也会跟着变化。 <body> <!-- 注意点1 : {{}} 里面只能放表达式 (有返回值的) - ...
  • 用样例详细的说明插值表达式{{}}的使用,将模型数据插入到页面当中。 插值表达式为什么叫Mustache(英文:八字须)呢?看看{{内容}}的两个大括号像不像八字胡子呢! 二、怎么做 <!--mustache语法,不仅仅可以...
  • Vue中插值表达式 v-text v-html区别 插值表达式 v-text v-html都有插值的作用,但三种有区别: v-text和插值表达式不能解析html,v-html可以 插值表达式有闪烁问题,v-text和v-html没有 插值表达式只会替换自己位置...
  • Vue中使用插值表达式时,遇到网速慢的情况,就会出现闪烁的问题,我们可以使用v-cloak指令来解决这个问题。 默认情况下: <div id="app">{{ msg }}</div> let app = new Vue({ el: "#app", ...
  • VUE中插值表达式、v-text和v-html的区别 三者之前有一定的不同,要加以区分用在适当的地方 1、插值表达式 插值表达式应用的范围较广,相当于一个占位符, 缺点:使用插值表达式当网速较慢的时候会先显示插值原始字符...
  • 利用vue指令v-cloak解决 避免页面闪烁 //HTML代码块: {{xinxi}} //css代码: [v-cloak] { display:none !important; } //或者 [v-cloak]{ visibility: hidden ... 插值表达式只会替换自己的占位符,不会把整个元素清空
  • Vue插值表达式

    万次阅读 2018-10-25 21:26:20
    #Vue插值表达式{{}}   主要作用是进行数据绑定,最常见的形式是使用“Mustache”语法(双大括号)的文本插值。例如:&amp;lt;span&amp;gt;Message:{{msg}}&amp;lt;/span&amp;gt;Mustache标签将...
  • vue插值表达式的使用

    千次阅读 2019-10-26 15:13:27
    2.定义一个vuejs管理的区域,在vue管理的区域内可以是使用vuejs特性,可以使用插值表达式,把vuejs管理的数据放渲染在页面上。 3.实例化vue对象: 实例化的对象必须存在两个属性 ①:el 选择器,表示vuejs管理的...
  • 实现功能: 图片内容是标题的第一位 解决办法:
  • vue中插值表达式和Python的jinja2语法有点相似,, 都是 {{ 数据 }} 以大括号的形式来进行的 <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></...
  • Vue插值表达式{{}}   主要作用是进行数据绑定,最常见的形式是使用“Mustache”语法(双大括号)的文本插值。例如:Message:{{msg}}Mustache标签将会被替代为对应数据对象上msg属性(msg定义在data对象)的值...
  • 使用插值表达式渲染数据: <ul> <li> {{ obj1.obj2.name }} </li> </ul> 此时,obj1.obj2.name 为undefined,页面会报错找不到 name。这是因为页面加载的时候数据还没有渲染出来。解决...
  • 3.模拟插值表达式函数 4.解决对象多层嵌套得不到值的问题 5.运行结果 1.搭建html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport...
  • 主要介绍了Vue插值、表达式、分隔符、指令的相关知识,文中给大家提到了去除vue插值表达式{{}}的方法,需要的朋友可以参考下
  • 插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起,但是v-text只能显示Vue对象传递过来的数据,会替换掉节点里已有的内容。 总结: 1、如果要同时展示用户前台数据,那么就需要用插值表达式,...
  • 2、Vue插值表达式

    2021-04-01 10:12:06
    Vue插值表达式1、Vue的插值表达式{{}}2、什么是插值表达式 1、Vue的插值表达式{{}} 主要作用是进行数据绑定,最常见的形式是使用“Mustache”语法(双大括号)的文本插值。例如:Message:{{msg}}Mustache标签将会...
  • vue中,使用{{}}双花括号,在html标签的“内容区域”表现数据,这个技术称为插值表达式。 语法: <标签> {{ 表达式 }} </标签> <div> {{ city }} </div> 表达式:变量、常量、算术...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,561
精华内容 5,424
关键字:

vue中插值表达式