vue scoped的作用

短命女 2022-05-26 11:20 186阅读 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 条评论，186人围观）

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

相关阅读

相关 vue scoped属性的作用

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

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

相关 vue作用域插槽slot-scope详解

vue的插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。实际上，一个slot最核心的两个问题这里就点出来了，是显示不显示和怎样

怼烎@/ 2022年12月08日 15:45/ 0 赞/ 210 阅读

相关作用域(scope)

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

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

相关作用域(scope)

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

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

相关 Maven中scope标签的作用

compile：编译依赖范围（默认）。使用此依赖范围的Maven依赖，对于编译、测试、运行三种classpath都有效。典型的例子是spring-code，在编译、测试和

红太狼/ 2022年11月14日 13:16/ 0 赞/ 179 阅读

相关 Vue中的slot-scope=“scope“

背景： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

﹏ヽ暗。殇╰゛Y/ 2022年10月22日 12:56/ 0 赞/ 188 阅读

相关 scope作用域

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

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

相关 vue scoped的作用

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

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

相关 9 作用域(Scope)

作用域(Scope) 是一个存储应用数据模型的对象为表达式提供了一个执行上下文作用域的层级结构对应于 DOM 树结构作用域可以监听表达

深碍√TFBOYSˉ_/ 2022年05月26日 00:29/ 0 赞/ 200 阅读

相关 Vue scoped

scoped：样式私有化在vue文件的style标签上添加scoped属性，样式属性只作用于当前组件，不受其他组件样式影响，实现了样式的模块化组件样式 <te

╰半橙微兮°/ 2022年05月15日 12:43/ 0 赞/ 216 阅读