<template>
  <div class="todo-item" :class="{'is-complete':todo.completed}">
      <p>
          <input type="checkbox" @change="markComplete">
          {{todo.title}}
      </p>
  </div>
</template>
<script>
export default {
    name:'todo',
    props:["todo"],
    methods:{
        markComplete(){
            this.todo.completed = !this.todo.completed
            console.log(this.todo);
        }
    }
}
</script>
<style scoped>
.todo-item{
    background: #f4f4f4;
    padding: 10px;
    border-bottom: 1px dotted #ccc ;
}
.is-complete{
    text-decoration: line-through
}
.del{
    background: #ff0000;
    color: #fff;
    border: none;
    padding: 5px 9px;
    border-radius: 50%;
    cursor: pointer;
    float: right;
}
</style>

vue - 动态绑定 class的更多相关文章

  1. vue动态绑定class的最常用几种方式

    vue动态绑定class的最常用几种方式:  第一种:(最简单的绑定) 1.绑定单个class html部分: <div :class="{'active':isActive}&quo ...

  2. vue动态绑定类样式ClassName知多少

    对于动态绑定类样式,之前用的最多的也就是:class="{'classA':true}" ,今天遇到一种情况,就是要给元素动态添加一个保存在数据源中的类样式,那前边的这种写法显然满 ...

  3. Vue 动态绑定类名

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. vue动态绑定属性--基本用法及动态绑定class

    动态绑定属性v-bind:,语法糖形式:省略v-bind,仅写一个冒号. 一.动态绑定基本属性 1 <body> 2 <!-- v-bind 动态绑定属性-基本用法 --> 3 ...

  5. vue动态绑定src加字符串拼接

    关键点 1.img中的src的字符串动态拼接 2.style中的background属性赋值 一.img中的src的字符串动态拼接 1.问题是这样子的,瞧瞧 基本网络链接 : http://openw ...

  6. vue动态绑定background:url绑不上的问题

    场景: 利用swipper做轮播图,在联调的时候发现有些图片存在有些图片不存在 原因:图片路径中存在 (),和 background:url() 会冲突 解决方法: 一:oss图片路径避免出现括号 ( ...

  7. vue 动态绑定height以及v-if、v-else的使用

    动态绑定height: :style="{height: slideHeight+'rem'}" slideHeight: 2 如果需要计算来得到高度,如: <p :styl ...

  8. vue动态绑定图片和背景图

    1.动态绑定图片 <img class="binding-img" :src="require('../assets/images/test.png')" ...

  9. Vue 动态绑定CSS样式

    今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示. 效果图: 由于Element UI版本我用的是2.5.4  使用进度条的话 就没有2.9. ...

  10. vue 动态绑定背景图片

    html <div class="racetm" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverIm ...

随机推荐

  1. kafka2x-Elasticsearch 数据同步工具demo

    Bboss is a good elasticsearch Java rest client. It operates and accesses elasticsearch in a way simi ...

  2. UIScrollView的API

    @property(nonatomic, weak) id<UIScrollViewDelegate> delegate; 滚动视图对象的委托. @property(nonatomic) ...

  3. 最大流EK板子

    #include <bits/stdc++.h> using namespace std; ; const int INF=0x7fffffff; typedef long long ll ...

  4. Python流程控制-3 循环控制

    循环控制,就是让程序循环运行某一段代码直到满足退出的条件,才退出循环. Python用关键字for和while来进行循环控制,但是没有其它语言的do...while语句(在Java和PHP中都有do ...

  5. jmeter学习笔记一foreach控制器

    ForEach控制器 输入变量前缀:上一步所提取的变量名的前缀,例如appid_1, 则appid就是前缀 start index for loop:循环的起始位置,默认为空也可 end index ...

  6. 中山Day5——普及

    今天题目真是贼难呐...才38... 收获:树状数组单个修改 树状数组区间修改 T1:旅行 题意:有n个数,问;从中取任意个数,他们的和为质数的方案数是多少?(n<=50) 暴力模拟即可,这里不 ...

  7. 使用CSS3动画属性实现各种旋转跳跃

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...

  8. 科学计算库(BLAS,LAPACK,MKL,EIGEN)

    函数库接口标准:BLAS (Basic Linear Algebra Subprograms)和LAPACK (Linear Algebra PACKage) 1979年,Netlib首先用Fortr ...

  9. MySQL操作之DDL

    目录 SQL语句的分类 DDL语句 SQL语句的分类 DDL(Data Definition Languages)语句:数据定义语言.这些语句定义了不同的数据段. 数据库.表.列.索引等数据库对象的定 ...

  10. 进程管理与SELinux

      进程(process):   将程序与进程的总结:  程序 (program):通常为 binary program ,放置在储存媒体中 (如硬盘.光盘.软盘.磁带等), 为实体文 件的型态存在 ...