vue scoped的作用

最新推荐文章于 2025-05-29 11:15:00 发布

cvper

最新推荐文章于 2025-05-29 11:15:00 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue scoped ｌａｎｇ＝＂ｌｅｓｓ＂

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80153677

vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了在Vue.js中如何使用scoped属性限定样式作用范围及通过lang属性指定LESS作为样式语言的方法。通过一个具体示例展示了如何组织组件的样式代码，并保持良好的封装性和可维护性。

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

在 vue的组件化开发中，我们会给　　＜ｓｔｙｌｅ＞＜／ｓｔｙｌｅ＞　中加上一些参数，

比如：ｓｃｏｐｅｄ　　，或者　　ｌａｎｇ＝＂ｌｅｓｓ＂；

ｓｃｏｐｅｄ　的意思是下面的样式的作用域就是当前这个组件，比如ａａ．ｖｕｅ这个组件，

所有的样式只在当前这个组件中有效果，那么ｌａｎｇ＝＂ｌｅｓｓ＂的意思是，声明我是用的

是ｌｅｓｓ　还是　ｃｓｓ　还是ｓａｓｓ等等；

下面是个小例子：　主要看ｓｔｙｌｅ部分，这里我使用了ｌｅｓｓ，并且设置样式只在当前

组件中有效果

<template>
       <div class="us">
           <h3 @click="info1">关于我们--2018 更新</h3>
           <p v-if="skate">{{skate}}</P>
           <h3 @click="info2">join us --2018更新</h3>
           <P v-if="skate">{{music}}</P>
       </div>
</template>


<script> 
import axios from "axios";
import Mock from "mockjs";
Mock.mock('http://www.bai.com',{
            'skate':'大家来自天南海北,因为轮滑开始有了交集,时光不老，我们不散!',
            'music':`我们喜欢音乐,我们喜欢轮滑,我们喜欢飞的感觉,仿佛有了翅膀,这里无拘无束,
                     只是让你不再寂寞的一个人飞,欢迎加入我们,相关活动我们会在活动页面发布，
                     请注意浏览！`,
        })

export default {
   
   name:"Us",
   data(){
       return{
           skate:"",
           music:""
       }  
   },
   methods:{
       info1(){
           let that=this;
          axios.get("http://www.bai.com")
          .then(function(response){
            //   console.log(response.data.skate);
              that.skate=response.data.skate;
          })
          .catch(function(response){
          })      
       },
       info2(){
           let that=this;
          axios.get("http://www.bai.com")
          .then(function(response){
              that.music=response.data.music;
          })
          .catch(function(response){
          })      
       }
        
   }
}
</script>



<style lang="less" scoped>
    @base:32;
    .us{
        width:100%;
        height:auto;
        box-sizing:border-box;
        h3{
        box-sizing:border-box;
        font-size:unit(8/@base,rem);
        height:unit(30/@base,rem);
        padding:unit(3/@base,rem);
        padding-top:unit(5/@base,rem);
        color:#0084ff;
        border-bottom:1px solid #f5f5f5;
        }
        p{
            padding:unit(10/@base,rem);
            color:#333;
            font-size:unit(10/@base,rem);
            line-height:unit(20/@base,rem);
        }
    }
</style>