13.使用类样式，也就是VUE中有多个方法使用style样式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=adge">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
    .red{
        color:pink;
    }
    .italic{
        font-style:italic;
    }
    .thin{
        font-weight:200;
    }
    .small{
        font-size:14px;
    }
    </style>
</head>
<body>
    <div id="app">
        <p>在Vue中，使用v-bind 为元素绑定数组的类样式</p>
        <h1 :class="['red','small']">这是一个大大的H1，我骄傲！</h1>
        <h1 :class="['italic','thin']">这是一个大大的H1，我骄傲！</h1>
        <hr>
        <p>在数组中使用三元运算符</p>
        <input type="button" @click="isthin=true" value="变瘦">
        <h1 :class="['italic',isthin?'thin':'']">这里样式通过data来判断</h1>
        <hr>
        <p>在数组中使用对象形式，简化三元表达式</p>
        <input type="button" @click="isthin=true" value="变瘦">
        <h1 :class="['italic',{thin:isthin}]">这里样式通过data来判断</h1>
        <hr>
        <p>传递对象作为类样式</p>
        <input type="button" @click="isthin=true" value="变瘦">
        <h1 :class="{thin:true,italic:true,red:true,small:isthin}">这里样式通过data来判断</h1>
    </div>
</body>
<script>
    //创建Vue实例，得到ViewModel
    var vm=new Vue({
        el:"#app",
        data:{
            isthin:false
        },
        methods:{}
    });
</script>
</html>

 

posted @ 2021-03-09 08:38  种太阳  阅读(129)  评论(0)    收藏  举报