学习vue.js中class与style绑定


Posted in Javascript onDecember 03, 2016

关于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;
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
微信小程序实现购物车代码实例详解
Aug 29 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 #Javascript
jQuery 选择符详细介绍及整理
Dec 02 #Javascript
JQuery 动态生成Table表格实例代码
Dec 02 #Javascript
jQuery实现背景滑动菜单
Dec 02 #Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 #Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 #Javascript
基于jQuery实现的幻灯图片切换
Dec 02 #Javascript
You might like
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
英文求职信结束语大全
2013/10/26 职场文书
创伤外科专业推荐信范文
2013/11/19 职场文书
大学活动邀请函
2014/01/28 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
公司演讲稿开场白
2014/08/25 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
Pygame Event事件模块的详细示例
2021/11/17 Python
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python