VUE面试题

A阳光码农

已于 2022-10-24 15:22:24 修改

阅读量1.2k

点赞数 2

文章标签： vue.js javascript 前端 1024程序员节

于 2022-10-22 13:35:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52014130/article/details/127422514

版权

本文详细介绍了Vue.js中控制元素显示隐藏的多种方式，包括v-if、v-show及其用法对比，以及v-if-else的条件控制。同时，阐述了MVVM模式的核心概念，解释了Vue的双向数据绑定原理和组件间参数传递机制。此外，还涵盖了Vue的生命周期、路由实现、事件修饰符以及组件数据必须为函数的原因。最后，讨论了Vue在响应路由参数变化、路由传参和不同路由守卫的使用策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用vue控制元素显示隐藏方式

解：1.V-if，v-if-else控制DOM的删除和添加，不同于v-show对DOM的显示和隐藏

一：v-show
.控制元素显示，通过display:none控制显示
.语法：v-show="变量或者表达式"
.如果变量或者表达式为true,会显示标签，否则隐藏
二：v-if
.v-if控制标签显示
.语法：v-if="变量或者表达式"
.v-if通过控制标签是否删除显示，v-if有性能优势

代码示例：
<template>
  <div>
    <h1 v-show="age >= 18">年满18岁才能看到以下内容</h1>
    <hr>
    <h1 v-if="age >= 18">年满18岁才能看到以下内容</h1>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          age: 1,
        };
      },
      methods: {},
    };
</script>

三：v-if-else
.v-if可以和v-else搭配，用来条件控制显示
.v-if和v-else一定要是相邻元素
.v-if和v-else-if还有v-else可以一起搭配，实现多个条件判断
.v-show不可以和v-else搭配使用

<template>
  <div>
    <h1 v-if="age >= 18">来吃榴莲</h1>
    <h1 v-else>来吃甜甜圈</h1>
    <h1 v-if="age < 18">甜甜圈</h1>
    <h1 v-else-if="age < 60">枸杞泡水</h1>
    <h1 v-else-if="age < 80">脑白金</h1>
    <h1 v-else-if="age < 100">冬虫夏草</h1>
    <h1 v-else>灵丹妙药</h1>
  </div>
</template>

<script>
   export default {
     data() {
       return {
              age: 18,
          } ;
       },
       methods: {},
    };
</script>