面试题目之:说出至少4种vue当中的指令和它的用法?

说出至少4种vue当中的指令和它的用法?
(1){{}} 、v-html 和v-text ==》 非表单元素
{{}}:以{{data的属性名}}的方式直接使用在标签之间
例如:

{{name}}

{{}}不能解析data中属性值中的标签
当vue.js没有加载出来时,页面中显示{{}}一类的数据,不利于用户 体验
解决闪屏问题:通过指令v-cloak实现:v-cloak绑定在作用于vue实例的标签上,当vue.js没有加载完成时,设置[v-cloak]的样式为:diplay: none,当vue.js加载完成后,将[v-cloak]作用的元素样式为:display: block
V-html:以标签的属性形式使用
v-html写在标签中,当做属性展示
v-html的值是data的属性名
标签中的内容不再浏览器体现.
v-htmlt可以解析data中属性值中的标签
当vue.js没有加载出来时,页面中不展示任何数据
V-text:同样以标签属性的形式使用
v-text写在标签中,当做属性展示
v-text的值是data的属性名
标签中的内容不再浏览器体现
v-text不能解析data中属性值中的标签
当vue.js没有加载出来时,页面中不展示任何数据
(2)v-model双向数据绑定指令
表单元素
v-model的值是data的属性名
input框的值是data的属性名对应的值
value属性在这里不起任何作用
(3)V-bind指令:绑定属性
媒体元素
v-bind指令:一般绑定的是属性(将标签原有的属性与data的属性进行绑定)
书写形式: v-bind:属性名=“data中的属性名”
v-bind:简写形式: :属性名=“data中的属性名”
(4)v-if和v-show
指令都是用于控制元素的隐藏与显示,使用的时候同样是当做标签的属性进行使用
春花秋月何时了
南来北往

相同点:都是控制着元素的显示和隐藏
不同点:当表达式的值为false,v-if采用的惰性模式,v-show通过样式中的属性display:none来控制
在实际应用中:
v-if:一般使用在页面一旦加载完成,几乎不再修改,可以使用
v-show:使用在元素切换频率比较高的情况下(eg:选项卡切换)
(5)v-for指令
遍历
遍历数组
遍历数值
遍历字符串
遍历对象
数组:v-for="(item,index) in 数组名称" v-for="(item,index) of 数组名称" item:指数组的每一项 index:指数组下标
  • {{index}}=== {{item}}

对象:v-for="(item,key,index) in 对象名称" item:指对象中的每一项值 key:对象的键 index:对象的下标
(6)v-once指令
作为标签的属性进行使用 v-once:指当前元素和它的所有子级首次在页面显示完成之后,不会再进 行修改

{{num}}

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页