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>
  • 相关阅读:
    两个进程之间的通讯——pipe 管道
    if if 和 if elif 的区别
    python处理大文件——文件流处理
    DNA甲基化及其测量方法(转)
    windows 服务器安装python及其基本库
    在linux系统个人目录下安装新版python
    python 列表中 [[], [], []] 和 3*[[]]差异
    Python脚本打包为exe文件
    GC偏好的校正与偏好程度的评估
    荧光分子的dynamic quenching 和 通常说的quenching的区别?
  • 原文地址:https://www.cnblogs.com/jinsuo/p/7637884.html
Copyright © 2011-2022 走看看