<template>
　　//:class="{样式名:布尔值}"
　　<div :class="{selected:flag}" @click="clickBtn">点击改变颜色</div>
</template>
export default{　
data(){
      return{
        flag :false
      }
    },
methods:{
　clickBtn(){

　      this.flag = !this.flag
　　}
   }
}
<style scoped>
.selected{
  　　color: red
}
<style>

vue实现动态绑定class--（boolean）绑定class,点击有，再点击取消的更多相关文章

  1. Vue.js 动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...

  2. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  3. 从Object.definedProperty中看vue的双向数据的绑定

    前言 Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.vue.js正式利用这种方法实现数据的双向绑定,以 ...

  4. element-ui（或者说Vue的子组件）绑定的方法中传入自定义参数

    比如el-upload中的 :on-success= fn,其实是给组件el-upload传递一个prop,这样写的话fn只能接受upload组件规定的参数,如果想自己传递父组件中的参数比如b,要写成 ...

  5. vue 如何在循环中绑定v-model

    vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...

  6. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  7. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

  8. vue中的数据双向绑定

    学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...

  9. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...

随机推荐

  1. 牛逼了，用Python破解wifi密码

    Python真的是无所不能,原因就是因为Python有数目庞大的库,无数的现成的轮子,让你做很多很多应用都非常方便.wifi跟我们的生活息息相关,无处不在.今天从WiFi连接的原理,再结合代码为大家详 ...

  2. vue累加计数器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 吴裕雄--天生自然 JAVASCRIPT开发学习：Date（日期） 对象

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

  4. PAT Advanced 1123 Is It a Complete AVL Tree (30) [AVL树]

    题目 An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child ...

  5. 「不会」Min25筛

    大概的思路是把所有数分成质数和合数考虑 对于质数,必须找出一个很简单的完全积性函数和所求函数拟合 把所有数当做质数看待求个前缀和,然后再枚举合数的最小质因子把合数T掉 枚举到根号n,即可保证把n以内的 ...

  6. 提高js性能的方法

    1.文档瘦身 (1)删除注释(版权及法律声明部分应保留),运行时不需要注释. (2)删除制表符.空格和换行符,这些只是为了便于程序的维护,但是与执行无关. (3)替换长的变量名为短的变量名. (4)使 ...

  7. App的布局管理

    今天学习了布局管理器,格局自己的学习内容和课程,我主要学习了两种管理布局方式 一:LinearLayout线性布局 线性布局是指布局里面的内容成线性排列,有两种排列方式,横向排列和纵向排列,而排列方式 ...

  8. python版本，执行

    01. 第一个 HelloPython 程序 1.1 Python 源程序的基本概念 Python 源程序就是一个特殊格式的文本文件,可以使用任意文本编辑软件做 Python 的开发 Python 程 ...

  9. mybatis框架快速入门

    通过快速入门示例,我们发现使用mybatis 是非常容易的一件事情,因为只需要编写 Dao 接口并且按照 mybatis要求编写两个配置文件,就可以实现功能.远比我们之前的jdbc方便多了.(我们使用 ...

  10. 吴裕雄--天生自然深度学习TensorBoard可视化：监控指标可视化

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data # 1. 生成变量监控信息并定义生 ...