当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 学习vue.js中class与style绑定

学习vue.js中class与style绑定

2018年05月11日  | 移动技术网IT编程  | 我要评论

新编辑部的故事,汇通快运,鸟的天堂ppt课件

关于vue.js中class与style绑定的练习代码，分享给大家，供大家参考：

html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vuejs中class与style 绑定</title>
<link rel="stylesheet" href="css/vuetext.css">
</head>
<body>
<!-- 数据绑定常见的需求是绑定class和内联样式
v-bind 可以绑定属性class -->
<!-- 这个表示如果isactive是true时 class就与active绑定 -->
<div id="app-1" v-bind:class="{ active: isactive }">
猴猴呀
</div>
<!-- 还可以绑定静态样式--> 
<div id="app-2" class="static" v-bind:class="{ active: isactive }">
lowrie
</div>
<!-- 还可以直接绑定数据里的一个对象--> 
<div id="app-3" v-bind:class="classobject">
猴猴呀
</div>
<div id="app-4" v-bind:class="[activeclass, errorclass]">
lowrie
</div>
<!-- 关于vue组件会专门再学习 -->
<!-- v-bind绑定内联样式与绑定class类似 数组 对象 -->

 

<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>

 js:

var app = new vue({
el: '#app-1',
data: {
message: 'hello vue!',
isactive: true,
}
});
var app2 = new vue({
el: '#app-2',
data: {
message: 'hello vue!',
isactive: true,
}
});
var app3=new vue({
el:'#app-3',
data: {
classobject: {
active: true,

}
}
});
var app4=new vue({
el:'#app-4',
data:{
activeclass: 'active',
errorclass: 'text-danger'
}
});

 css:

.active{
color: #ffa07a;
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网