vue---class和style的基本用法
不多BB了 直接上代码了 通俗移动易懂总结了5种常用改变样式 的形式
<style>
.actived2{
color:red;
}
</style>
</head>
<body>
<div class="app">
<div :style="actived">aaa</div>
<div :style="[actived]">aaa</div>
<div :style="{color:'red'}">aaa</div> <div :class="['actived2']">aaa</div>
<div :class="{actived2:isActived}">aaa</div> </div>
</body>
<script>
const app = new Vue({
el:'.app',
data:{
actived:{
color:"red"
},
isActived:true
}
})
</script>
vue---class和style的基本用法的更多相关文章
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- vue class与style绑定、条件渲染、列表渲染
列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...
- 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法
PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...
- vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由 ...
- vue框架中props的typescript用法
vue框架中props的typescript用法 在vue中使用typescript时,需要引入vue-property-decorator库来兼容格式. javascript写法 Vue.compo ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...
- vue class与style 绑定详解——小白速会
一.绑定class的几种方式 1.对象语法 直接看例子: <div id="app3"> <div :class="{'success':isSucce ...
- VUE温习：style层次分析
一.vue样式style层次分析 1.样式可以在main.js.模块js文件.组件style.组件script标签内,index.html文件内引入,不同位置引入的样式有什么关系. 2.总结: (1) ...
- 09.vue中样式-style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 自学git心得-3
转眼到第三节了,我们进入分支管理. git领域里的分支可以理解为一个有安全保障的临时仓库,有时我们新修改了代码,突然发现有bug需要回到之前的版本,有时我们开发到一半,突然要出去一趟,如何安全保存当前 ...
- Android设备网络压力测试
网络测试的几个维度: 网络的性能 带宽:通过TCP测试来量度 时延:用ping命令量度 数据报丢失:用Iperf UDP测试来量度 Jitter(延时变化):用Iperf UDP测试来量度 信号强度( ...
- tomcat7环境
官方下载页面:http://tomcat.apache.org/download-70.cgi 选择64-bit Windows zip下载 解压后,进入tomcat-7.0.73\bin目录,双击运 ...
- vuejs plus d3
vuejs 是一个数据驱动视图的前端框架,一切皆可以作为可重用的组件加以使用. d3则是数据可视化javascript库,如何将二者的长处相结合是一个挑战. https://tyronetudehop ...
- 记录windows下编译chromium，备忘
编译windows下chromium,时间:20170619, 官方地址:https://chromium.googlesource.com/chromium/src/+/master/docs/wi ...
- PHP面试常用算法(推荐)
一.冒泡排序 基本思想: 对需要排序的数组从后往前(逆序)进行多遍的扫描,当发现相邻的两个数值的次序与排序要求的规则不一致时,就将这两个数值进行交换.这样比较小(大)的数值就将逐渐从后面向前面移动. ...
- php中上传图片
这里来看看php中如何上传图片的 先看代码check_image.php <html> <head> <title></title> <style ...
- 团队作业—预则立&&他山之石（人月神教）
1.团队任务 GitHub issues 1.2 团队计划 2.访谈任务 2.1采访对象 采访团队:龙威零式 采访时间:2017.10.23 采访形式:微信群 2.2采访内容 问:你们选题的时候有哪些 ...
- centos6.4 minimal 安装kvm
操作系统是网易源下载的centos 64位的minimal安装包,很多工具都没有,像gcc make wget which where 等统统没有,好在有yum 这里为了简单起见直接用yum安装kvm ...
- JavaScript的事件对象_实现拖拽
实现拖拽一个元素 拖拽的流程: 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 当鼠标松开时,被拖拽元素固定在当前位置 onm ...