<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- <script src="vue.js"></script> -->

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <ul>

            <li :style="{color:colors[i]}" v-for="(item,i) in list" @click="show(item,i)">选项{{item}}</li>

        </ul>

    </div>

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                list: [1, 2, 3, 4, 5],

                colors: ['balck', 'green', 'yellow', 'purple', 'blue']

            },

            methods: {

                show: function (item, i) {

                    this.$set(this.colors, i, 'red')

                }

            }

        })

    </script>

</body>

</html>

VUE style 绑定的更多相关文章

  1. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  3. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  4. Vue.2.0.5-Class 与 Style 绑定

    Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...

  5. Vue学习4：class与style绑定

    说明:有些部分我只是相当于做一个学习笔记,加强记忆之用.所以可能阅读性不是那么强.如果有参考我这类博客的人,那么请见谅. 代码如下: <!DOCTYPE html> <html la ...

  6. vue从入门到进阶：Class 与 Style 绑定（四）

    绑定 HTML Class 对象语法 ①.添加单个class: <div v-bind:class="{ active: isActive }"></div> ...

  7. Vue中计算属性与class,style绑定

    var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...

  8. vue基础——Class与Style绑定

    Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见的需求. 因为它们都是属性,所以我们可以用v-bind来处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼 ...

  9. Vue教程：Class 与 Style 绑定（四）

    绑定 HTML Class 对象语法 ①.添加单个class: <div v-bind:class="{ active: isActive }"></div> ...

随机推荐

  1. jQuery使用ajax跨域请求获取数据

    jQuery使用ajax跨域请求获取数据  跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...

  2. 异常处理_python

    一.异常处理格式: name=[1,2]data={}try: name[3] data['name']except (KeyError,IndexError) as e : #捕捉指定的几个错误类型 ...

  3. 改善深层神经网络（三）超参数调试、Batch正则化和程序框架

    1.超参数调试: (1)超参数寻找策略: 对于所有超参数遍历求最优参数不可取,因为超参数的个数可能很多,可选的数据过于庞大. 由于最优参数周围的参数也可能比较好,所以可取的方法是:在一定的尺度范围内随 ...

  4. [USACO08JAN] 手机网络 - 树形dp

    经典问题系列 覆盖半径\(1\)的最小点覆盖集 \(f[i][0]\) 表示不在此处建信号塔,但\(i\)及其子树都有信号 \(f[i][1]\) 表示在此处建信号塔,但\(i\)及其子树都有信号 \ ...

  5. OpenCV中imread失败cvLoadImage成功

    MYLAF 环境说明 编程环境:Windows 10(64bit), VS2013, OpenCV 2.4.12; 编程语言:C/C++: MYLAF 现象 在代码中,调用imread读取图片失败,但 ...

  6. centos python版本升级到3.x

    Linux(CentOS)下将Python的版本升级为3.6.2的方法 1.检查确认系统的相关信息 查看内核版本[root@zstest1 ~]# cat /etc/redhat-release Ce ...

  7. Introduction to Writing Functions in R

    目录 在R中编写函数 args(函数名) 创建一个函数的步骤 1.default args Passing arguments between functions Checking arguments ...

  8. C语言各语句的作用

    #include <stdio.h> 在使用标准函数库中的输入输出函数时,编译系统要求程序提供有关的信息(例如对这些输入输出函数的声明),#include<stdio.h>的作 ...

  9. VScode 编辑器快捷键被占用

    在家办公这个开发环境实在是让人受不鸟 .mysql .vscode 对连QQ都没有运行还是不行.排查最终发现了这个家伙—搜狗输入法.微软输入法 这两个把系统快捷键占得那个全 我这个全局搜索死活用不了, ...

  10. [TJOI2017] DNA - 后缀数组,稀疏表

    [TJOI2017] DNA Description 求模式串与主串的匹配次数,容错不超过三个字符. Solution 枚举每个开始位置,进行暴力匹配,直到失配次数用光或者匹配成功.考虑到容错量很小, ...