这篇文章给大家分享的是有关Vue.js中class与样式绑定的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
示例如：
<html>
<head>
<meta charset="utf-8">
<title>Vue test</title>
<style type="text/css">
body {font-family: Verdana;}
p { font-family: Times, "Times New Roman", serif;}
.static.active {color: green; font-size: 35px;}
div.text-danger {color: red;font-size: 25px;}
div.active {color: blue;font-family: Verdana;}
</style>
<script src="./vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</div>
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
<p>class property set.</p>
</div>
<div id="app3"
v-bind:class="[activeClass,errorClass]">
<p>group class property set.</p>
</div>
<div id="app4" v-bind:class="[isActive ? 'active' : 'text-danger']">
<p>三元表达式加样式</p>
</div>
<div id="app5">
<my-component v-bind:class="{ active: isActive }"></my-component>
</div>
<div id="app6">
<p v-bind:>绑定内联样式</p>
<p v-bind:>对象样式绑定</p>
</div>
<script>
Vue.component('todo-item', {
template: '<p>todo test.</p>'
})
// 一定要实例化才能用
var app = new Vue({
el: '#app'
})
// 用类选择器构造一个Vue对象并绑定额外的class属性
var app2 = new Vue({
el: '.static',
data: {
isActive: false,
hasError: true
}
})
// 数组语法加 class (因为是从下往上拿样式，所以text-danger的color样式被覆盖)
var app3 = new Vue({
el: '#app3',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
var app4 = new Vue({
el: '#app4',
data: {
isActive: true
}
})
Vue.component('my-component',{
template: '<p class="static">在已经定义好样式的自定义组件上加样式</p>'
})
var app5 = new Vue({
el: '#app5',
data: {
isActive: true
}
})
// 绑定内联样式
var app6 = new Vue({
el: '#app6',
data: {
activeColor: '#FF00FF',
fontSize: 30,
styleObject: {
color: '#585858',
fontSize: '25px'
}
}
})
</script>
</body>
</html>感谢各位的阅读！关于“Vue.js中class与样式绑定的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
