Vue25-scoped样式

Vue25-scoped样式

1. 作用：让样式在局部生效，防止冲突。
2. 写法：<style scoped>

<template>
 <div class="demo">
  <h2 class="title">学生姓名：{{name}}</h2>
  <h2 class="atguigu">学生性别：{{sex}}</h2>
 </div>
</template>

<script>
 export default {
  name:'Student',
  data() {
   return {
    name:'张三',
    sex:'男'
   }
  }
 }
</script>

<style lang="less" scoped>
 .demo{
  background-color: pink;
  .atguigu{
   font-size: 40px;
  }
 }
</style>