面试题(2)v-show和v-if区别,vue中的key的作用,assets和static的区别,computed 和 methods的区别 computed 和 watch的区别

(1) v-show和v-if区别

v-show判断显示隐藏,只是简单的切换display,适合频繁切换
v-if判断dom,条件很少时运用

在vue的data里定义了isLogin的值,当它为true时,网页就会显示:你好:JSPang,如果为false时,就显示请登录后操作

<div v-if="isLogin">你好:JSPang</div>
<script type="text/javascript">
        var app=new Vue({
    
    
            el:'#app',
            data:{
    
    
               isLogin:false
            }
        })
    </script>

三目运算符时
<span class="person_name">{
    
    {
    
    item.type_name == '车商' ? item.title : item.type_name == '车型' ? item.card_title : '暂无数据'}}</span>

第二种方法
<span v-if="item.type_name == '车商'" class="person_name">{
    
    {
    
    item.car_title}}</span>
<span v-if="item.type_name == '车型'" class="person_name">{
    
    {
    
    item.title}}</span>
<span v-else class="person_name">'暂无数据'</span>

匹配值显示  addnav='111'
<div v-if="addnav=='111'">你好:JSPang</div>

匹配值不显示  addnav='111'
<div v-if="addnav!='111'">你好:JSPang</div>

(2)vue中的key的作用

key的作用让每个item有一个唯一的识别身份,可以下标值index或者id, 主要是为了vue精准的追踪到每一个元素,高效的更新虚拟DOM。

(3)assets和static的区别

相同点
assets和static都是存放静态资源文件。项目中的文件图片,字体图标,样式文件等都可以放在这两个文件下
不同点
assets里面的静态资源文件,在打包时,压缩的静态资源文件最终也会放到static文件夹中跟着index.html一起上传到服务器
static中的静态资源文件,就不会走打包压缩程序,而是直接进入打包好的目录,直接上传至服务器。

(4)computed 和 methods的区别 computed 和 watch的区别

1.computed 计算属性 计算结果会缓存,只有当0依赖值改变才会重新计算
2.watch 监听属性 一个值的改变 需要另一个值的改变而改变,结果不会缓存
3.methods 事件方法 调用一次,执行一次,结果不会缓存

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Sunshine_GirlXue/article/details/103042063
今日推荐