当前位置：首页 > VUE

vue怎么实现显示页面

2026-02-22 16:06:32VUE

Vue 实现页面显示的方法

Vue.js 是一个用于构建用户界面的渐进式框架，可以通过多种方式实现页面显示。以下是几种常见的方法：

使用 Vue 单文件组件 (SFC) 创建一个 .vue 文件，包含模板、脚本和样式三部分。例如：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

挂载到 DOM 元素 在 main.js 中创建 Vue 实例并挂载到 HTML 的 DOM 元素上：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

使用路由 (Vue Router) 安装并配置 Vue Router 来显示不同页面：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

动态组件 通过 component 标签和 is 属性动态切换组件：

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

条件渲染 使用 v-if、v-else 或 v-show 控制元素显示：

vue怎么实现显示页面

<template>
  <div>
    <p v-if="show">这段文字会根据 show 的值显示或隐藏</p>
    <p v-else>其他内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

这些方法可以根据具体需求选择使用或组合使用，Vue 的灵活性允许开发者以多种方式实现页面显示功能。