vueclass
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bgBlue{
background: skyblue;
}
.bgPink{
background: pink;
}
.div1{
width: 300px;
height: 300px;
margin: 0 auto;
}
#div1{
width: 300px;
height: 300px;
margin: 0 auto;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :class="color"> </div>
<button @click='changeColor'>更改颜色</button>
<hr />
<div :class="color2"> </div>
<button @click='changeColor2'>更改颜色</button> <hr /> <div :class="color3"> </div>
<button @click='changeColor3'>更改颜色</button> <hr /> <div :class="['div1',divBG]"> </div>
<button @click='changeColor4'>更改颜色</button> <hr /> <!--
vue给class属性专门定制了绑定的方式，那么不会删除默认class里面的值，而是进行添加的方式，将绑定变量里面的值放入class
-->
<div data-key='123' :data-key='msg' class="123" :class="['div1',{bgPink:!isBlue},{bgBlue:isBlue}]"> </div>
<button @click='changeColor5'>更改颜色</button> </div>
<script type="text/javascript"> var app = new Vue({
el:'#app',
data:{
color:'div1 bgBlue',
color2:{
div1:true,
bgBlue:true,
bgPink:false
},
color3:[ 'div1','bgBlue' ],
divBG:'bgBlue',
isBlue:true,
msg:'hello'
},
methods:{
changeColor:function(){
this.color = 'div1 bgPink'
},
changeColor2:function(){
this.color2 = {
div1:true,
bgBlue:false,
bgPink:true
}
},
changeColor3:function(){
this.color3 = ['div1','bgPink']
//新建了1个数组，将老的内存地址覆盖掉
//this.color3[1] = 'bgPink',因为这样并没有更改掉color3内存地址没有更改掉，所以不会触发视图的更新
//this.$set(this.color3,1,'bgPink')
},
changeColor4:function(){
this.divBG = 'bgPink'
},
changeColor5:function(){
this.isBlue = false
}
}
}) </script>
<!--
1、class属性绑定变量，变量是相对应的classname的字符串
2、使用对象的方式来绑定class,根据对象里的属性值是否是true，来决定这个属性是否添加进class
3、数组的形式
-->
</body>
</html>
vueclass的更多相关文章
- vue---class和style的基本用法
不多BB了 直接上代码了 通俗移动易懂总结了5种常用改变样式 的形式 <style> .actived2{ color:red; } </style> </head> ...
- Nuxt / Vue.js in TypeScript: Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'
项目背景, Nuxt(vue), TypeScript 生成完项目框架, 添加测试demo页面. 在生成的模板代码中添加layout配置如下: <script lang="ts&quo ...
- vue-class和style样式绑定
前言 操作元素的 class 样式列表和 style 内联样式为数据绑定是前端开发中一个常见的需求,这些样式都属于元素的属性 attribute ,因此我们可以通过 v-bind 来动态绑定元素的样式 ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战：异步实现数据双端渲染
回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家 ...
- 从壹开始前后端分离 [ vue + .netcore 补程 ] 三十一║ Nuxt终篇：基于Vuex的权限验证探究
缘起 哈喽大家好,今天周四啦,楼主明天要正式放假了,这里先祝大家节日快乐咯,希望在家里能继续研究点儿东西吧,今天呢是 nuxt 的最后一篇,主要是对权限登录进行研究,这一块咱们之前在说第一个项目的时候 ...
- Vue+typescript报错项
39:1 Unable to resolve signature of class decorator when called as an expression. Type '<VC exten ...
- 使用 typescript 开发 Vue
基础配置: 1. 准备一个使用 vue-cli 生成的项目 2. 使用 npm 一建安装基础配置 npm i -S @types/node typescript vue-class-component ...
- Vue-Property-Decorator源码分析
概述 vue-property-decorator是基于vue组织里vue-class-component所做的拓展,先来了解一下vue-class-component Vue-Class-Compo ...
- vue学习笔记3： 动态绑定
一.知识点 动态绑定: vue-class: 三目写法 对象写法 数组写法 vue-style: 三目写法 对象写法 数组写法 二.代码示例 1. vue-class vue-class三目写法 &l ...
随机推荐
- visual c++.net 技术内幕 第6版 附带的程序如何在vs2013中编译成功
看vc++技术内幕时 如果你使用的是比此书的附带项目更新版的vs时千万不要使用这种方法,这些对编译都有影响. 请使用当前新版的vs并输入书中改动的代码就Ok,因为vs会生成合理的mfc代码,养成好的习 ...
- layui-table 对表格数据进行处理之后的排序问题
使用layui table过程中,将某一列的数据格式进行转换,或者将0/1状态改为是/否,或者将数字改为星星评分显示的时候都会遇到一个问题,我的表格数据转换成其他形式,同时设置了sort:true,此 ...
- 深度解密Go语言之反射
目录 什么是反射 为什么要用反射 反射是如何实现的 types 和 interface 反射的基本函数 反射的三大定律 反射相关函数的使用 代码样例 未导出成员 反射的实际应用 json 序列化 De ...
- flexible.js分析--JavaScript
//立即执行函数 (function flexible(window, document) { // 获取的html 的根元素 var docEl = document.documentElement ...
- httpd2.4
更换网站主页目录 1.在httpd.conf文件中更改documentroot为新的路径,并为其相应的路径给与相应的权限. Documentroot "/www/http" < ...
- 整理基础的CentOS常用命令
如何知道apache装在哪里? which httpd 1.查看系统使用端口并释放端口 [root@my_nn_01 WEB-INF]# lsof -w -n -i tcp:80 COMMAND ...
- [LeetCode] 1137. N-th Tribonacci Number
Description e Tribonacci sequence Tn is defined as follows: T0 = 0, T1 = 1, T2 = 1, and Tn+3 = Tn + ...
- Spring Boot 2.X(三)：使用 Spring MVC + MyBatis + Thymeleaf 开发 web 应用
前言 Spring MVC 是构建在 Servlet API 上的原生框架,并从一开始就包含在 Spring 框架中.本文主要通过简述 Spring MVC 的架构及分析,并用 Spring Boot ...
- 【MySQL】mysql5.7数据库的安装和配置
第一步:直接从官网下载安装包,.msi 可以直接点击安装..zip直接解压到目录,本人是C:\Program Files\MySQL\mysql-5.7 第二步:需要配置环境变量,我的电脑->属 ...
- 【原创】（七）Linux内存管理 - zoned page frame allocator - 2
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...