vue 添加样式分几种方法

作者: 上海_前端_求内推 | 来源:发表于2021-07-15 09:10 被阅读0次

vue 添加样式分几种方法
Vue 插件开发指南
vue解决vant组件样式失效问题
vue判断各种状态添加样式
Vue 插件
24. 插件
IOS常用控件学习之UITableView
vue绑定class和style
Vue 插件及Vue.use源码分析
vue 插件开发--install

1，

<body>
<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

2,

<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    hasError: true
  }
})

3,

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})

4,

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

5,

<style>
.text-danger {
    width: 100px;
    height: 100px;
    background: red;
}
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>
</head>
<body>
<div id="app">
    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

6,

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
    fontSize: 30
  }
})