<!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. SVM-支持向量机（二）非线性SVM分类

    非线性SVM分类 尽管SVM分类器非常高效,并且在很多场景下都非常实用.但是很多数据集并不是可以线性可分的.一个处理非线性数据集的方法是增加更多的特征,例如多项式特征.在某些情况下,这样可以让数据集变 ...

  2. 关于Git的右键菜单消失的处理

    右键菜单 Git Bash Here window + R,输入regedit回车进入注册表 进入如下目录 HKEY_CLASSES_ROOT\Directory\Background\shell 在 ...

  3. SimpleDateFormat中YYYYmmDDhhMMss大小写问题-获取不到正确时间以及常见的格式串

    1.问题解决: SimpleDateFormat sf = new SimpleDateFormat("YYYYmmDDhhMMss");String transTime = &q ...

  4. ApiBehaviorOptions 统一模型验证配置不生效

    ApiBehaviorOptions 的统一模型验证配置一定要放到(.AddMvc)后面.

  5. KMP小扩展，找出子串在主串中出现的所有位置

    KMP算法能够高效地匹配字符串,找出子串(T串)在主串(S串)中出现的首个位置的原算法网上已经有很多优秀的博文进行详细讲解,这里就不多赘述. 这篇博文主要是对KMP原算法稍作改动,使其能够在主串中把所 ...

  6. Java Set集合的详解

    一,Set Set:注重独一无二的性质,该体系集合可以知道某物是否已近存在于集合中,不会存储重复的元素 用于存储无序(存入和取出的顺序不一定相同)元素,值不能重复. 对象的相等性 引用到堆上同一个对象 ...

  7. python数据赋值后，修改新数据，原数据如何保证不被修改？

    python中对象,赋值后是同一地址,如果是可变对象,对其中一个修改会影响到另一个,如果要生成完全新的对象,应使用deepcopyimport copydata1=copy.deepcopy(data ...

  8. 后台执行linux命令

    /** * * 方法说明:移植执行linux命令 * * @param cmdStr 需要执行的linux命令 * @return 执行命令后的输出(如果是启动一个进程,则可能一直无法返回) * @t ...

  9. sql查询——范围查询（区间查询）

    --范围查询(区间查询) --in() --查询年龄为18,28,38的人 select *from student where age=18 or age=28 or age=38; select ...

  10. 简单了解一个WSDL,SOAP的格式

    简单了解一个WSDL,SOAP的格式 2016-06-20 09:34:43 树先生i 阅读数 5187  收藏 更多 分类专栏: WebService   版权声明:本文为博主原创文章,遵循CC 4 ...