关于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;
};
关于vue.js中class与style绑定的学习的更多相关文章
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- vue.js中，input和textarea上的v-model指令到底做了什么？
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- vue.js中的slot
vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...
- Vue.js中css的作用域
Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...
- Vue循环中多个input绑定指定v-model
Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种,一种是v-for中循环生成 ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
随机推荐
- VMware下利用ubuntu13.04建立嵌入式开发环境之二
之前在VMware中安装完Ubuntu系统,接下来开始设置开发中用到的服务和工具,以及系统设计. 1.安装VMware工具:打开VMware软件,在菜单->VM->Install VMwa ...
- 读IT小小鸟有感
第一次阅读<我是一只IT小小鸟>是在老师的推荐下的,我是一名软工大一新生,那天在课堂上听到了这本书,由于是10年前的老书,要找到它非常不易,终于在网上看到一些部分电子档. ...
- java1234初学maven
第一讲: maven maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. maven安装与下载: .确定jdk已经安装并且配置 .安装mav ...
- ANDROID : java.lang.NoSuchMethodError: org.apache.commons.codec.binary.Base64.encodeBase64String in android
Andriod系统包中现在已经自带加密函数,如果用apache的codec包则会报以上错误,用android.util.Base64以下方法代替org.apache.commons.codec.bin ...
- Monkey基本使用流程及测试报告分析
前一篇文章介绍了Monkey的API函数内容,这篇文章介绍windows环境下Monkey的基本使用方法. 由于博客园年底才能完成对markdown解析的升级,可移步我的个人博客查看此文,已获得更好的 ...
- ios开发之网络php
接着前面的学习,几天上午学习了数据库网络值php用户的注册与登录,感觉代码与ios上的oc太相似了,因此学习下来没什么障碍了,下面是代码: 首先是javascript.html文件中: <!DO ...
- Ubuntu 64位下搭建ADT的种种问题
我使用的adt版本为 adt-bundle-linux-x86_64-20140702.zip 1. Eclipse启动时提示 adb 无法加载动态链接库 libstdc++.so.6 以及 lib ...
- 团队开发——冲刺2.g
冲刺阶段二(第七天) 1.昨天做了什么? 编写软件计划书第三阶段:整理用户体验建议:据用户对界面的要求,把小球改头换面,借鉴超级马里奥叔叔的道具们. 2.今天准备做什么? 最后的美工,统一整合: 测试 ...
- prompt弹框返回输入的文本
演示网址链接http://www.w3school.com.cn/jsref/met_win_prompt.asp <html> <head> <script type= ...
- iOS 服务器回空数据的处理
后端返回一个数组类型的数据,但是数据里面包含"<null>","(null)"等,本地缓存写入数据失败,write to File: 方法限制, 可 ...