Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
</body>
</html><DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>绑定class</title>
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        </head>
​
        <style>
            .divStyle{
                background: darkred;
                width: 100px;
                height: 100px;
            }
​
            .bodyStyle{
                border: 10px solid blue;
            }     
​
            .redBackground{
                background: darkred;
            }   
            .blueBackground{
                background: blue;
            }
            
            .active{
                background: black;
                width: 100px;
                height: 100px;
                color: pink;
            }
​
            .error{
                border: 1px solid red;
            }
​
        </style>
        <body>
        绑定class <br>
        
        <div id="app">
            绑定class 对象语法： 对象的键名是类名，值是布尔值 <br>
            <div :class="{ divStyle : isActive , bodyStyle : isBorder}"></div>
​
            <input type="button" value="点击我切换背景" :class="{ redBackground: isRed , blueBackground: isBlue}" @click="changeColor">
            
            <div :class="classnames"></div> 计算属性
​
            绑定class 数组语法 :数组中的成员 直接对应 类名<br>
            <div :class="[activeClass, errorClass]">我是数组绑定class</div>
​
        </div>
​
        
        需求：点击一个按钮，来回切换背景颜色为红，蓝
        <script>
            
            var app = new Vue({
                el: '#app',
                data:{
                    isActive: true,
                    isBorder: false,
                    isRed: true,
                    isBlue: false,
                    activeClass: 'active',
                    errorClass: 'error'
                },
​
                methods:{
                    changeColor:function(){
                        this.isBlue = !this.isBlue     
                    }
                },
​
                computed:{
                    classnames:function(){
                        return {
                            active: this.isActive && !this.isBorder
                        }
                    }
                }
            })
            
        </script>
        </body>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lovexwupro
0viewers