<!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. shell登录 脚本 expect

    作用 工作中,我们运行命令.脚本或程序时,这些命令.脚本或程序都需要从终端输入某些继续运行的指令,而这些输入都需要人为的手工进行. 利用expect,则可以根据程序的提示,模拟标准输入提供给程序,从而 ...

  2. 配置maven时，报JAVA_HOME错误

    其实原因很简单,是之前java的jdk配置不合规范! 一.我是win10系统. 二.我的java jdk放在D盘,环境变量里,JAVA_HOME是D:\Program Files\Java\jdk1. ...

  3. Java基本语法--程序流程控制

    流程控制语句是用来控制程序中各语句执行顺序的语句,可以把语句组合成能完成一定功能的小逻辑模块.流程控制方式采用结构化程序设计中规定的三种基本流程结构,即:顺序结构.分支结构.循环结构.本篇博客主要是对 ...

  4. QuerySet的常用方法

    QuerySet常用方法 使用 connection.queries 可以查看sql语句 filter 将满足条件的结果返回,返回值为QuerySet对象 exclude 将满足条件的结果过滤掉,返回 ...

  5. C语言strcmp()函数：比较两个字符串

    strcmp() 函数用于对两个字符串进行比较(区分大小写). 头文件:string.h 语法/原型: int strcmp(const char* stri1,const char* str2); ...

  6. Django 初试水（一）

    2020年注定是一个不平凡的一年!坚持就是胜利,一起加油! 至于为什么使用 Django,也不想说太多.个人喜欢,这里不做介绍.直接进入主题.show me the code!!! python 的环 ...

  7. ubuntu查看系统负载和程序运行状况

    1,没有图形化界面 纯文字:top 美化的文字界面:htop 2,图形界面查看系统状态: gnome-system-monitor(或者在搜索界面中搜索system monitor) 3,jetson ...

  8. 2D TOOLKIT备忘录

    通过Clip名称更改动画片段 // 通过clip名称获取clip实例 tk2dSpriteAnimationClip clip = childrenAnimator.GetClipByName(&qu ...

  9. thinkphp 二级域名绑定模块，导致设置的路由被多域名共用的问题解决方案

    问题背景: 在router.php路由配置文件设置了二级域名和路由设置 use think\Route; Route::domain('www','index'); Route::domain('ad ...

  10. [HTML] websocket的模拟日志监控界面

    模拟命令行的界面效果,使用swoole作为websocket的服务,重新做了下html的界面效果 <html> <head> <title>SwLog Montio ...