vue.js:响应式布局(vue@3.3.4)

一，代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<template>   <div class="hello">     <div>页面宽度:{{screenWidth}}px</div>     <h1>{{ msg }}</h1>     <div v-if="screenWidth < 768">小屏幕布局</div>     <div v-else-if="screenWidth < 992">中屏幕布局</div>     <div v-else>大屏幕布局</div>     </div> </template>   <script> import { ref,onMounted,onUnmounted } from 'vue'; export default {   name: 'HelloWorld',   setup() {       //获取屏幕宽度     const screenWidth = ref(window.innerWidth);       //处理resize     const handleResize = () => {       screenWidth.value = window.innerWidth     }       //加载页面时，添加对resize的响应     onMounted(() => {       window.addEventListener("resize", handleResize)     })       //页面umount时，移除监听事件     onUnmounted(() => {       window.removeEventListener('resize', handleResize);     })         return {         screenWidth,       }   }, } </script>   <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 {   margin: 40px 0 0; } ul {   list-style-type: none;   padding: 0; } li {   display: inline-block;   margin: 0 10px; } a {   color: #42b983; } </style>

二，测试效果:

说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/09/09/vue-js-xiang-ying-shi-bu-ju-vue-3-3-4/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com

三，查看vue版本:

root@lhdpc:/data/vue/responsive# npm list vue
responsive@0.1.0 /data/vue/responsive
├─┬ @vue/cli-plugin-babel@5.0.8
│ └─┬ @vue/babel-preset-app@5.0.8
│   ├─┬ @vue/babel-preset-jsx@1.4.0
│   │ └── vue@3.3.4 deduped
│   └── vue@3.3.4 deduped
└─┬ vue@3.3.4
  └─┬ @vue/server-renderer@3.3.4
    └── vue@3.3.4 deduped