1.样式切换

单个切换样式

/*html部分*/
<div class="bg" v-bind:class="{active:isActive}"></div>
<button v-on:click="toggle">切换</button>
/*样式部分*/
.bg{
width:300px;
height:200px;
background: #f6f6f6;
}
.bg.active{
background:#ddd;
}
/*vue部分*/
export default {
components:{todoItem},
data () {
return {
isActive:true
}
},
methods:{
toggle(){
this.isActive=!this.isActive;
}
}
}

列表切换样式

/*html部分*/
<ul>
<li v-for="(item,index) in menu" :class="{on:flag==index}" @click="light(index)">{{item.name}}</li>
</ul>
/*样式部分*/
.on{
color:red;
}
/*vue部分*/
export default {
data () {
return {
menu:[
{'name':'语文'},
{'name':'数学'},
{'name':'自然'},
{'name':'社会'},
{'name':'和谐'}
],
flag:0
}
},
methods:{
light(index){
this.flag=index;
}
}
}
效果图

vue2.0细节剖析的更多相关文章

  1. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  2. vue2.0构建淘票票webapp

    项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...

  3. 项目vue2.0仿外卖APP(六)

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  4. vue2.0+koa2+mongodb实现注册登录

    前言 前段时间和公司一个由技术转产品的同事探讨他的职业道路,对我说了一句深以为然的话: "不要把自己禁锢在某一个领域,技术到产品的转变,首先就是思维上的转变.你一直做前端,数据的交互你只知道 ...

  5. vue2.0 配置环境总结(都是泪啊)

    最近有点空闲时间,终于把一直想学的vue提上了日程,以下是收集的一些帮助入门的链接 1:https://vuefe.cn/v2/guide/ vue2.0中文官网 2:https://router.v ...

  6. 基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤

    效果演示地址, github地址: demo演示:         1.About 此项目是 vue2.0 + element-ui + node+mongodb 构建的后台管理系统,所有的数据都是从 ...

  7. 实现vue2.0响应式的基本思路

    最近看了vue2.0源码关于响应式的实现,以下博文将通过简单的代码还原vue2.0关于响应式的实现思路. 注意,这里只是实现思路的还原,对于里面各种细节的实现,比如说数组里面数据的操作的监听,以及对象 ...

  8. Vue2.0以后,有哪些变化

    最近移动端项目版本升级,Vue由之前的1.0升级到2.3,那么,Vue2.0之后,有哪些细节的变化呢,现在总结如下: 1.在每个组件模板,不再支持片段代码 组件中模板: 之前: <templat ...

  9. Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

随机推荐

  1. GPS坐标转换 百度地图API调用

    1 如果GPS输出的值是DD.DDDDDDDD格式的,直接调用地图API的转换函数处理,就可以正常显示2 如果GPS输出的值是DD.MMMMMMMM格式的,就需要先进行分转度处理,然后再调API,就可 ...

  2. PHP搜索中的sql注入

    ----------------------------------------------------------------------------------------- 防止查询的sql攻击 ...

  3. Unity AssetBundle

    Unity AssetBundle爬坑手记 - 夜阑卧听风吹雨 时间 2014-09-15 16:55:00  博客园精华区原文  http://www.cnblogs.com/ybgame/p/39 ...

  4. Uni2D入门

    转载 http://blog.csdn.net/kakashi8841/article/details/17558059 开始 Uni2D增加了一些新的便利的特性给Unity,它们用于推动你2D工作流 ...

  5. workerman 平滑重启

    <?phpuse Workerman\Worker;use Workerman\Lib\Timer; require_once '../../web/Workerman/Autoloader.p ...

  6. jq select 一些操作

    添加option $("#ID option").each(function(){if($(this).val()==111){$(this).remove();}}); 移除op ...

  7. 关于解决java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoader问题

    解决方案: 其实是你的jar文件没有同步发布到自己项目的lib目录中 (如果是用Maven进行构建的话) 可以试试 下面的办法 –rebuild下project就可以了 项目点击右键 点击 Prope ...

  8. PHPWAMP集成环境配置ssl证书

    和apache配置ssl证书流程一样, LoadModule socache_shmcb_module modules/mod_socache_shmcb.so LoadModule ssl_modu ...

  9. kafka集群压力测试--基础。

    1.生产者测试 kafka-producer-perf-test.bat --num-records 1000000 --topic test --record-size 200 --throughp ...

  10. AttributeError: 'dict' object has no attribute 'iteritems'

    在python3.6中运行 sortedClassCount = sorted(classCount.iteritems(), key=operator.itemgetter(1), reverse= ...