vue scoped的作用

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

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

相关阅读

相关 vue 中slot-scope的作用

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

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

相关 vue scoped属性的作用

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

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

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

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

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

相关作用域(scope)

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

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

相关作用域(scope)

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

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

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

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

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

相关 scope作用域

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

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

相关 maven scope 的作用

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

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

相关 vue scoped的作用

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

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

相关 Vue scoped

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

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