6.css与style绑定_css text-danger-CSDN博客

本文链接：https://blog.csdn.net/T_testView/article/details/112354621
HTML元素有两个设置样式的属性:css和style，前者用于指定样式表中的class，后者用于设置内联样式，在vue.js中可以使用v-bind指令来处理它们；只需要通过表达式计算出字符串的结果即可。只不过，字符串拼接比较麻烦而且容易出错,因此，在将v-bind用于class和style时，vue专门做了增强。表达式结果的类型除了字符串之外，还可以是对象或者数组。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-bind-绑定HTML class</title>
    <style>
        .active{
            width: 100px;
            height: 100px;
            background: #00FF00;
        }
        .text-danger{
            background: red;
        }
    </style>
</head>
<body>
<!--
  active这个class存在与否将取决于数据属性isActive的值，isActive为真是则这个样式类起作用，
   反之，则相当于没有加样式，也可以在对象中传入更多属性来动态切换多个class，此外，v-bind:class指令还可以
   和普通的class属性一起使用。一下样例显示的值为:<div class="static active"></div>,当属性isActive或
   hasError改变时，class列表将相应地更新。例如，如果hasError的值也为true，class列表将变为：
   <div class="static active text-danger"></div>
-->
<div id="app">
   <div class="static" v-bind:class="{active:isActive,'text-danger':hasError}"></div>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            isActive:true,
            hasError:false
        }
    });
</script>
</body>
</html>


对象语法：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-bind-绑定HTML class</title>
    <style>
        .active{
            width: 100px;
            height: 100px;
            background: #00FF00;
        }
        .text-danger{
            background: red;
        }
    </style>
</head>
<body>
<!--
  当绑定的数据对象较为复杂，可以在数据属性中单独定义一个对象，然后绑定它。
-->
<div id="app">
   <div class="static" v-bind:class="classObject"></div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            classObject:{
                active:true,
                'text-danger':false
            }
        }
    });
</script>
</body>
</html>



通过绑定一个返回对象的计算属性：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-bind-返回对象的计算属性</title>
    <style>
        .active{
            width: 100px;
            height: 100px;
            background: #00FF00;
        }
        .text-danger{
            background: red;
        }
    </style>
</head>
<body>
<!--
  当绑定的数据对象较为复杂，可以在数据属性中单独定义一个对象，然后绑定它。
-->
<div id="app">
   <div class="static" v-bind:class="classObject"></div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive:true,
            error: null
        },
        computed:{
            classObject:function () {
          return{
              active:this.isActive&& !this.error,
              'text-danger':this.error&& this.error.type === 'fatal'
          }
        }
        }
    });
</script>
</body>
</html>



绑定内联样式：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-bind绑定内联样式</title>
</head>
<body>
<!--
v-bind:style的对象语法非常像HTML的内联CSS样式语法，但其实是一个javaScript对象，
Css属性名可以使用驼峰式(cameCase)或短横线分割(kebab-case,记得用括号引起来)来命名。
显然直接以对象字面量的方式设置CSS样式属性代码冗长，且可读性较差。
所以我们可以在数据属性中定义一个样式对象，然后直接绑定该对象，这样模板也会更清晰
-->
<div id="app">
   <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">
       《vue.js无难事》
   </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            activeColor:'red',
            fontsize:30
        }
    });
</script>
</body>
</html>


优化过的代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-bind绑定内联样式</title>
</head>
<body>
<!--
同样的，对象语法也常常结合返回对象的计算属性使用
-->
<div id="app">
   <div v-bind:style="styleObject">
       《vue.js无难事》
   </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObject:{
            color:'red',
            fontsize:'50px'
            }
        }
    });
</script>
</body>
</html>


数组语法：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-bind绑定内联样式（数组语法）</title>
</head>
<body>
<div id="app">
   <div v-bind:style="[baseStyles,moreStyles]">
   </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            baseStyles:{
                border:'solid 2px black'
            },
            moreStyles:{
             width:'100px',
                height:'100px',
                background:'orange'
            }
        }
    });
</script>
</body>
</html>



实例（表格奇偶行应用不同的样式）：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-bind-奇偶行不同的样式</title>
    <style>
        body {
            width: 600px;
        }
        table {
            border: 1px solid black;
        }
        table {
            width: 100%;
        }
        th {
            height: 50px;
        }
        th,td{
            border-bottom: 1px solid #dddddd;
        }
        [v-cloak] {
            display: none;
        }
        .even{
            background-color: #C2BE9E;
        }
    </style>
</head>
<body>

<div id="app" v-cloak>
  <table>
      <tr>
          <th>书号</th>
          <th>书名</th>
          <th>作者</th>
          <th>价格</th>
          <th>操作</th>
      </tr>
      <tr v-for="(book,index) in books" :key="book.id" :class="{even : (index+1) % 2 === 0}">
          <td>{{book.id}}</td>
          <td>{{book.title}}</td>
          <td>{{book.price}}</td>
          <td>{{book.author}}</td>
          <td>
              <button @click="deleteItem(index)">删除</button>
          </td>
      </tr>
  </table>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            books:[
                {id:1,title:'Vue.js从入门到实战',price:98,author:'孙鑫'},
                {id:2,title:'Vue.js从入门到入坟',price:198,author:'孙鑫'},
                {id:3,title:'java并发编程原理',price:298,author:'孙鑫'},
                {id:3,title:'java网络编程原理',price:298,author:'孙鑫'}
            ]
        },
        methods:{
            deleteItem(index) {
                this.books.splice(index,1);
            }
        }
    });
</script>
</body>
</html>