12道web前端高级面试题目及答案，Vue（一，腾讯T2大牛亲自讲解

举例：使用{{}}显示隐藏不同数据；

Welcome:{{uname}}

性别:{{sex == 1?"男":"女"}}

小计:¥{{price*count.toFixed(2)}}

下单时间:{{new Date(orderTime).toLocaleString()}}

星期{{arr[day]}}

效果如下：

    

四、指令

专门给HTML元素添加新功能的特殊HTML属性就是指令，含13种。

1.v-bind

如果元素的属性值可能随程序自动变化，则不能用{{ }}绑定，要用v-bind指令代替{{ }}绑定属性值。格式如下：

<元素 v-bind:属性名=“js变量或表达式”>

//简写

<元素 :属性名=“js变量或表达式”>

//注意：

//加了: 之后就不需要{{}}了

//=右边的""就起到了{{}}的作用

原理：new Vue()在扫描页面时，只要发现 : 开头的属性，都会先自动计算=右边的js变量或表达式的值，然后将变量或表达式的值作为当前属性的属性值；

举例：根据pm2.5数值，显示不同表情；

<img :src="

pm25<100 ? ‘img/1.png’:

pm25<200 ? ‘img/2.png’:

pm25<300 ? ‘img/3.png’:

‘img/4.png’

">

效果如下：

2.v-show

专门控制一个元素显示隐藏的特殊指令，用程序控制一个元素的显示或隐藏时，都用v-show。

<元素 v-show=“true/false”>

原理：只要new Vue()扫描到v-show，就会先计算=右边的判断条件的值，如果=右边的判断条件值为true，则当前元素默认正常显示，如果=右边的判断条件值为false，则v-show自动被翻译为style=“display:none”，表示当前元素隐藏。

举例：打开和关闭对话框；

<button @click=“show”>click me

<a @click=“hide” href=“javascript:;”>×

效果如下：对话框点击按钮显示，点击×隐藏。

3.v-if, v-else

专门控制两个元素二选一显示，当要在两个元素之间选择一个时，就用v-if和v-else。

<元素1 v-if=“条件1”>

<元素2 v-else>

//注意：

//else后无序再写等于

//元素1和2之间不能再有其他元素

原理：当new Vue()扫描到v-if时，先计算=右边条件变量或表达式的值，如果v-if等号右边的条件为true，则new Vue()会保留v-if所在元素，删除v-else所在元素；如果v-if等号右边的条件为false，则new Vue()会先删除v-if所在的元素，保留v-else所在的元素。

举例：切换用户登录状态；