Vue技术10.绑定样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>绑定样式</title>
        <style>
            .basic{
      
      
                width: 400px;
                height: 100px;
                border: 1px solid black;
            }
            .happy{
      
      
                border: 4px solid red;
                background: linear-gradient(30deg,yellow,pink,orange,yellow);
            }
            .sad{
      
      
                border: 4px solid gray;
                background: rgb(60, 100, 209);
            }
            .normal{
      
      
                border: 4px solid orange;
                background: rgb(240, 191, 43);
            }
            .atguigu1{
      
      
                border-radius: 30px;
                background: forestgreen;
            }
            .atguigu2{
      
      
                font-size: 50px;
            }
            .atguigu3{
      
      
                background-color: cornflowerblue;
            }
        </style>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            绑定样式：
                1.class样式
                    写法：class=‘xxx' xxx可以是字符串、对象、数组。
                        字符串写法适用于：类名不确定，要动态获取。
                        对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
                        数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
                2.style样式
                    :style="{fontSize: xxx}"其中xxx是动态值。
                    :style="[a,b]"其中a、b是样式对象。
        -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <!-- 绑定class样式 字符串写法，适用于：样式的类名不确定，需要动态指定-->
            <div class="basic" :class="mood" @click="changeMood">{
   
   {name}}</div>
            <br/><br/>
            <!-- 绑定class样式 数组写法，适用于：要绑定的样式个数不确定，名字也不确定-->
            <div class="basic" :class="classArr">{
   
   {name}}</div>
            <br/><br/>
            <!-- 绑定class样式 对象写法，适用于：要绑定的样式个数确定，名字也确定,但要动态决定要不要-->
            <div class="basic" :class="classObj">{
   
   {name}}</div>
            <br/><br/>
            <!-- 绑定style样式 对象写法-->
            <div class="basic" :style="styleObj">{
   
   {name}}</div><br/><br/>
            <!-- 绑定style样式 数组写法-->
            <div class="basic" :style="styleArr">{
   
   {name}}</div>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

       const vm = new Vue({
      
      
            el:'#root',
            data:{
      
      
                name:'尚硅谷',
                mood:'normal',
                classArr:['atguigu1','atguigu2','atguigu3'],
                classObj:{
      
      
                    atguigu1:true,
                    atguigu2:false,
                    atguigu3:false
                },
                styleObj:{
      
      
                    fontSize: '40px',
                    color: 'orange'
                },
                styleArr:[
                    {
      
      
                        fontSize: '30px',
                        color: 'red',
                    },
                    {
      
      
                        backgroundColor:'black'
                    }
                ]
            },
            methods:{
      
      
                changeMood(){
      
      
                    const arr = ['happy', 'sad','normal']
                    const index = Math.floor(Math.random()*3)
                    this.mood = arr[index]
                }
            }
        })

    </script>
</html>
Vue技术10.绑定样式

猜你喜欢
