<!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. asp.net core 发布到linux下Docker

    1.linux Docker 安装 内核升级:https://www.cnblogs.com/zksfyz/p/7919425.html 安装:   https://www.runoob.com/do ...

  2. PP: Sequence to sequence learning with neural networks

    From google institution; 1. Before this, DNN cannot be used to map sequences to sequences. In this p ...

  3. VSCode的Vue插件Vetur设置

    使用VSCode编写vue项目时安装了Vetur插件,但是每次alt+shift+f格式化代码的时候就有点让人头疼, 缩进自动变成了2个空格(习惯了用4个空格缩进,不同层级的代码看着明显一点),js代 ...

  4. （转）一致性Hash

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/23397179     一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT) ...

  5. Github中进行fork后，原仓库更新了如何与原仓库同步

    我们经常在Github中Fork别人优秀的项目(在自己的GitHub下面生成一个repository),如果原仓库作者或组织更新仓库,此时你Fork的项目并不会更新,如果我们想要更新操作,该如何操作? ...

  6. 'ssh-keygen' 不是内部或外部命令，也不是可运行的程序

    右键我的电脑,点击环境变量,设置系统配置里面的Path 新增一个 D:\ruanjiananzhuangdizhi\Git\usr\bin 路径就可以了

  7. git上传代码技巧

    1.一定要先在git上面创建项目然后把文件拉到本地先 1.1克隆到本地(orgin=>'你的远程仓库地址') git clone orgin 1.2初始化项目文件夹 git init 2.操作之 ...

  8. Jupyter Notebook快捷键总结

    1. Jupyter Notebook有两种mode Enter:进入edit模式 Esc:进入command模式 2. Command命令快捷键: A:在上方增加一个cell B:在下方增加一个ce ...

  9. mybatis一对多 多对一 多对多

    https://blog.csdn.net/AdminGuan/article/details/98952484   Mybatis的Mapper该如何编写多对一? 很简单,就是在resultMap标 ...

  10. JS高级---浅拷贝

    浅拷贝   拷贝就是复制, 就相当于把一个对象中的所有的内容, 复制一份给另一个对象, 直接复制, 或者说, 就是把一个对象的地址给了另一个对象, 他们指向相同, 两个对象之间有共同的属性或者方法, ...