vue scoped的作用
在 vue的组件化开发中，我们会给 ＜ｓｔｙｌｅ＞＜／ｓｔｙｌｅ＞ 中加上一些参数，比如：ｓｃｏｐｅｄ ，或者 ｌａｎｇ＝＂ｌｅｓｓ＂；ｓｃｏｐｅｄ 的意思是下面的样式的作用域就是当前这个组件，比如ａａ．ｖｕｅ这个组件，所有的样式只在当前这个组件中有效果，那么ｌａｎｇ＝＂ｌｅｓｓ＂的意思是，声明我是用的是ｌｅｓｓ 还是 ｃｓｓ 还是ｓａｓｓ等等；下面是个小例子： 主要看ｓｔｙｌｅ部分，这里我
·
在 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
0- 0
已为社区贡献11条内容
所有评论(0)