zoukankan      html  css  js  c++  java
  • v-bind:class

    <!-- <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind绑定class </title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div  id="box" class="bigbox" v-bind:class="{active: isActive,'text-danger':hasError}">v-bind绑定原生属性class有两种方法  这是第一种</div>
        <!-- v-bind是专门用来绑定html原生属性的 
            这里是一个对象,里面的key是class的名称,值是绑定数据,当绑定数据为true的时候,这个class就会渲染到html里;
            注意key这里加 ‘’或不加都是一样的。
    
        -->
        <!--
    </body>
    
    <script type="text/javascript">
        new Vue({
            el:"#box",
            data:{
                isActive:true,
                hasError:false   //这是一种方法
            }
        })
    </script>
    </html> -->
    <!-- <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind绑定class </title>
    
    </head>
    <body>
        <div  id="box" class="bigbox" v-bind:class="classObject">v-bind绑定原生属性class有两种方法  这是第二种对象表示</div>
         v-bind是专门用来绑定html原生属性的 
            这里是一个对象,里面的key是class的名称,值是绑定数据,当绑定数据为true的时候,这个class就会渲染到html里;
            注意key这里加 ‘’或不加都是一样的。
    
        
    </body>
        <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:"#box",
            data:{
                classObject:{     //这种方法直接绑定一个对象
                    isActive:false,
                    hasError:true   
                }
                
            }
        })
    </script>
    </html> -->
    
    
    <!-- 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind绑定class </title>
    
    </head>
    <body>
        <div  id="box" class="bigbox" v-bind:class="[activeClass, errorClass]">v-bind绑定原生属性class有两种方法  这是第三种数组表示</div>
         v-bind是专门用来绑定html原生属性的 
            这里是一个对象,里面的key是class的名称,值是绑定数据,当绑定数据为true的时候,这个class就会渲染到html里;
            注意key这里加 ‘’或不加都是一样的。
    
        
    </body>
        <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:"#box",
            data:{   //这种方法用数组表示
                    activeClass:'active',
                    errorClass:'text-danger'   
            }
        })
    </script>
    </html>
     -->
    <!--  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind绑定class </title>
    
    </head>
    <body>
        <div  id="box" class="bigbox" v-bind:class="[isActive ? activeClass : '', errorClass]">v-bind绑定原生属性class有几种方法  这是第四种数组表示</div>
         v-bind是专门用来绑定html原生属性的 
            这里是一个对象,里面的key是class的名称,值是绑定数据,当绑定数据为true的时候,这个class就会渲染到html里;
            注意key这里加 ‘’或不加都是一样的。
    
        
    </body>
        <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:"#box",
            data:{   //这种方法用数组表示
                    activeClass:'active',
                    errorClass:'text-danger'   
            }
        })
    </script>
    </html> -->
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind绑定class </title>
    
    </head>
    <body>
        <div  id="box" class="bigbox" v-bind:class="[{ active: isActive }, errorClass]">v-bind绑定原生属性class有几种方法  这是第五种数组表示</div>
         <!-- v-bind是专门用来绑定html原生属性的 
            这里是一个对象,里面的key是class的名称,值是绑定数据,当绑定数据为true的时候,这个class就会渲染到html里;
            注意key这里加 ‘’或不加都是一样的。 -->
    
        
    </body>
        <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:"#box",
            data:{   //这种方法用数组表示
                    activeClass:'active',
                    errorClass:'text-danger'   
            }
        })
    </script>
    </html>
    
    
    
    
    //  二次视频学习
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind 实例</title>
        <script type="text/javascript" src="js/vue.js"></script>
        <style type="text/css">
            .classA{
                color: red;
            }
            .classB{
                color: blue;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h1>v-bind实例</h1>
        <div id="app">
            <p><img v-bind:src="imgSrc" alt="" width="200"></p>
    
            <p><a :href="webUrl" target="_blank">百度</a></p>
            <p>
                <label for="chek">isok值为:{{isok}}</label>
                <input type="checkbox" id="chek" v-model="isok">
            </p>
            <div :class="className">01、绑定</div>
            <div :class="{classB:isok}">02、绑定class中的判断</div>    
            <div :class="[classA,classB]">03、绑定class中数组</div>
            <div :class="isok?classA:classB">04、绑定class中的三元运算符</div>
            <div :style="{color:color,fontSize:font}">05、绑定style方法-01</div>    
            <div :style="styleObj">06、绑定对象style方法-02</div>    
        </div>
        <script type="text/javascript">
            new Vue({
                el:"#app",
                data:{
                    imgSrc:"http://img1.imgtn.bdimg.com/it/u=3284176169,1506766548&fm=200&gp=0.jpg",
                    webUrl:"http://baidu.com",
                    className:"classA",
                    isok:false,
                    classA:'classA',
                    classB:'classB',
                    color:"yellow",
                    font:'20px',
                    styleObj:{
                        color:'green',
                        fontSize:'30px'
                    }
                }
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    从新浪财经获取金融新闻类数据并进行打分计算
    SQL窗口函数的用法总结
    从新浪财经获取金融新闻类数据并保存到MySQL
    [ZJOI2015]幻想乡战略游戏
    二次剩余入门
    [多校赛20210406]迫害 DJ
    [NOI Online 2021 提高组] 愤怒的小N
    [NOI Online 2021 提高组] 岛屿探险
    「UNR #3」百鸽笼
    [ZJOI2019]开关
  • 原文地址:https://www.cnblogs.com/jinsuo/p/7637884.html
Copyright © 2011-2022 走看看