vue scoped的作用

短命女 2022-05-26 11:20 255阅读 0赞

在 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*: 1 px solid \#f5f5f5;

\}

p\{

*padding*: unit( 10 /@base,rem);

*color*: \#333;

*font-size*: unit( 10 /@base,rem);

*line-height*: unit( 20 /@base,rem);

\}

\}

</ style>

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中scope的作用是什么

在Vue中，`scope` 是一个用于样式的作用域属性，用于限定样式的作用范围。当你在Vue组件的样式中使用 `scoped` 属性时，它会将样式限制在当前组件的作用域内，而不

左手的ㄟ右手/ 2024年03月23日 22:38/ 0 赞/ 56 阅读

相关【Vue_Scoped】scoped作用

what？？ > 在vue文件中的style标签上，有一个特殊的属性：scoped。 > 当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的

小鱼儿/ 2024年03月16日 21:24/ 0 赞/ 61 阅读

相关＜scope＞provided＜/scope＞作用

使用：在使用maven时会，添加servlet-api依赖时会添加provided  <properties>

电玩女神/ 2023年09月30日 08:01/ 0 赞/ 14 阅读

相关 vue 中slot-scope的作用

> 1.slot-scope="scope"来取得作用域插槽:data绑定的数据，scope可以随便替换其他名称，只是定义对象来代表取得的data数据，用于使用而已。 > >

悠悠/ 2023年09月24日 15:59/ 0 赞/ 37 阅读

相关 vue scoped属性的作用

当style标签具有该scoped属性时，其CSS将仅应用于当前组件的元素。作用功能：实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块虽然

深藏阁楼爱情的钟/ 2023年02月13日 11:44/ 0 赞/ 167 阅读

相关作用域(scope)

1. 什么是作用域作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性 function

r囧r小猫/ 2022年11月22日 05:27/ 0 赞/ 203 阅读

相关作用域(scope)

1. 什么是作用域作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性 function

怼烎@/ 2022年11月20日 05:55/ 0 赞/ 209 阅读

相关 scope作用域

依赖范围 1.test:测试范围,编译和打包都不会引入依赖 2.compile:编译范围,编译和打包都会加入依赖 3.provided:编译和测试时的范围,打包时不

古城微笑少年丶/ 2022年10月01日 04:53/ 0 赞/ 512 阅读

相关 maven scope 的作用

scope范围决定了其依赖传递和作用时期 all （compile ） =compile,runtime ,test provide,system,

本是古典何须时尚/ 2022年09月04日 07:46/ 0 赞/ 20 阅读

相关 vue scoped的作用

在 vue的组件化开发中，我们会给　　＜ｓｔｙｌｅ＞＜／ｓｔｙｌｅ＞　中加上一些参数，比如：ｓｃｏｐｅｄ　　，或者　　ｌａｎｇ＝＂ｌｅｓｓ＂；ｓｃｏｐｅｄ　的

短命女/ 2022年05月26日 11:20/ 0 赞/ 256 阅读