zoukankan      html  css  js  c++  java
  • vue基础---06class与style绑定

    00.样式绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
        <style type="text/css">
            .page{
                width:200px;
                height:200px;
                background:red;
                display:black;
            }
            .active{
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 通过对象的方式决定是否存在某个类 -->
            <div class="page" :class="{active:isTrue}"></div>//":"是v-bind的简写,此处,class有两个值
            <!-- 直接放置对象 -->
            <div class="page" :class="styleObj"></div>
            <!-- 放置数组 -->
            <div class="page" :class="styleArr"></div>
            <!-- 放置字符串 -->
            <div class="page" :class="styleStr"></div>
            <!-- 数组和对象混合使用 -->
            <div class="page" :class="styleArrObj"></div>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    isTrue:true,
                    // 下面对应上面的直接放置对象
                    styleObj:{active:true,laochen:true},//可以在浏览器查看div的class属性有几个
                    //下面对应上面的放置数组
                    styleArr:['col-xs-12','red-bg'],//可以通过push方法添加等
                    //下面是对应上面的字符串
                    styleStr:"ment step clone",
                    //下面对应上面的数组和对象混合使用
                    styleArrObj:['abc',{active:true}]
                }
            })
        </script>
    </body>
    </html>
    
    在控制台输入app.isTrue=false,将.active隐藏,故,page就可以显示出来
  • 相关阅读:
    Android访问数据库(SQL Server 和 MySQL)
    Andriod开发环境搭建
    SQL 学习记录
    安装双系统 win7 + ubuntu 15.04
    SQL资料
    电脑使用
    python_L7
    ONE
    网页性能优化
    js的继承
  • 原文地址:https://www.cnblogs.com/hunter1/p/15250785.html
Copyright © 2011-2022 走看看