一、style

scoped 避免样式重叠 

  1. <style  scoped>   
  3.   /* .v-leave,.v-enter-to{
  4.     opacity: 1;
  5.   } */
  7. </style>
  1. 当 <style> 标签有scoped 属性时，它的 CSS 只作用于当前组件中的元素
  2. 你可以在一个组件中同时使用有 scoped 和 非scoped 样式：
  5. <style>
  6. /* 全局样式 */
  7. </style>
  9. <style scoped>
  10. /* 本地样式 */
  11. </style>
  1. .active{
  2.   color:#C20C0C
  3. }
  1. <body>
  2.     <div id="app">
  3.         <p :class="{active:true}">{{msg}}</p>
  4.     </div>
  5.     <script>
  6.         var vm = new Vue({
  7.             data:{
  8.                 msg:"hello vue"
  9.             }
  10.         }).$mount("#app")
  11.     </script>
  12. </body>

1-1 深度作用选择器 >>>

参考文档
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

  1. <style scoped>
  2. .a >>> .b { /* ... */ }
  3. </style>

上述代码会编译成：

  1. .a[data-v-f3f3eg9] .b { /* ... */ }

/deep/
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

Less使用deep

  1. <style lang="less" scoped>
  2. .searchforminline-out {
  3. /deep/ input{
  4. width: 50px;
  5. }
  6. </style>

二、class

  1. <p :class="['one','two']">{{msg}}</p>
  • 三元表达式
    1. <p :class='["one",flag?"two":""]'></p>   //flag:true
    2. <p :class='['one',{'two':flag}]'></p>
    image.png

三、style和class绑定

image.png

image.png

示例：

1、动态给List里面的item一个属性

Tip:通过下标的判断
image.pngimage.pngimage.png