<!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. (填坑系列) 用aio写server与client进行通信的坑

    最近闲来无事,就估摸着自己写个“服务注册中心”来玩,当然因为是个人写的,所以一般都是简洁版本. 代码地址在:https://gitee.com/zhxs_code/my-service-registe ...

  2. 关于Django图片上传

    首先要设置settings # 上传文件 MEDIA_ROOT = 'media' # 项目下的目录 MEDIA_URL = "/media/" # 跟STATIC_URL类似,指 ...

  3. LED And Incandescent, Who Is Suitable For Holiday Lighting?

    Fast-fire advantages of LED lighting: Eco-friendly-LEDs are not made of toxic chemicals, such as mer ...

  4. IntelliJ IDEA 2019.1.3 最新破解教程【最强 可用至2099年】

    本文包括最新[2019.1.2]安装 和[2018.3.2](推荐)安装 ①IntelliJ IDEA 2018.3.2安装永久安装[最强]  一. 在官网下载IDEA安装包  链接:https:// ...

  5. Java流，文件和I/O

    java.io包中包含几乎所有可能永远需要在Java中执行输入和输出(I/ O)类.所有这些数据流代表一个输入源和输出目标. java.io包中的流支持多种数据,如基本类型,对象,本地化的字符等 流可 ...

  6. centos开发环境搭建

    1.检查是否安装php php -v yum install php 2.安装composer curl -sS https://getcomposer.org/installer |php //下载 ...

  7. 解决报错Failed to start LSB: Bring up/down networking：MAC地址导致

    1.场景描述,我在电脑里装好的虚拟机,今天突然就网络无法打开,并出现如下报错: [root@ansible-control ~]# systemctl start networkJob for net ...

  8. [Luogu]中位数

    Description Luogu1168 Solution 一种神奇的做法:开一个大根堆和小根堆,保证大根堆比小根堆多1个元素,且大根堆堆顶元素比小根堆堆顶元素小,那么大根堆堆顶就是中位数.插入的时 ...

  9. session的到底是做什么的？

    原文地址:https://blog.csdn.net/h19910518/article/details/79348051 前言: 今天就来彻底的学一些session是个啥东西,我罗列了几个需要知道的 ...

  10. Spring Boot Actuator未授权访问

    当我们发现某一个网页的logo是一篇叶子或者报错信息如下图所示的话,就可以尝试Spring Boot Actuator未授权访问. /dump - 显示线程转储(包括堆栈跟踪) /autoconfig ...