2019-08-18 vue v-bind绑定class

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div id="app">

<p :class="{active:a,left:b}">内容</p>

<p :class="obj">内容2</p>

</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

let vm=new Vue({

el:'#app',

data:{

obj:{

a:true,

b:true

            },

a:true,

b:false

        }

})

</script>

</html>



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div id="app">

<p :class="[left,active]">neiron</p>

<p :class="[aObj,bObj]">neiron</p>

</div>

</body>

</html>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

let vm=new Vue({

el:'#app',

data:{

left:'a',

active:'b',

aObj:{

c:true

        },

bObj:{

d:false

        }

}

})

</script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。