学习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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
PHP中include与require使用方法区别详解
2013/10/19 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
python入门教程之基本算术运算符
2020/11/13 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
食堂员工工作职责
2013/12/18 职场文书
小学教师培训感言
2014/02/11 职场文书
护士岗位职责
2014/02/16 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
公证委托书
2014/08/01 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
公司股东合作协议书
2014/09/14 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
入党积极分子群众意见
2015/06/01 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
运动会广播稿300字
2015/08/19 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书