<!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. ALSA lib编译

    http://blog.sina.com.cn/s/blog_7d7e9d0f0101lqlp.html alsa  lib: #!bin/sh rm -rf ./output/* mkdir -p ...

  2. Java判断一个字符串是否有中文

    Java判断一个字符串是否有中文一般情况是利用Unicode编码(CJK统一汉字的编码区间:0x4e00–0x9fbb)的正则来做判断,但是其实这个区间来判断中文不是非常精确,因为有些中文的标点符号比 ...

  3. PP: Robust Anomaly Detection for Multivariate Time Series through Stochastic Recurrent Neural Network

    PROBLEM: OmniAnomaly multivariate time series anomaly detection + unsupervised 主体思想: input: multivar ...

  4. Lumen跨域问题，PHP CORS Middleware

    前导 本篇文字作为?<「新轮子」PHP CORS (Cross-origin resource sharing),解决 PHP 项目程序设置跨域需求.>的续篇. 简介 什么是 medz/c ...

  5. SAM的应用及例题

    专门开一个帖子记录一下自己在学习SAM时做的题,并总结一下做法 1.LCS https://www.cnblogs.com/wenci/p/10432932.html 这道题是要求对两个字符串查找最长 ...

  6. SpringMVC-简单参数绑定

    SpringMVC-简单参数绑定    众所周知,springmvc是用来处理页面的一些请求,然后将数据再通过视图返回给用户的,前面的几篇博文中使用的都是静态数据,为了能快速入门springmvc,在 ...

  7. Linq To Sqlite使用心得

    若要使用Linq To Sqlite类库,可以安装Devart Linq Connect Model,如图: 新建这个Model就可以和Linq To Sql一样使用Linq模型,下载地址:https ...

  8. Appium连接模拟器

    Appnium 环境搭建 覆盖文件 将SDK中platform-tools目录下的这三个文件 复制到模拟安装路径bin目录下,覆盖原有的这三个文件 adb命令 开启服务 adb start-serve ...

  9. Hog实例

    1.计算Hog的特征得维度: #include <iostream> #include <opencv2/core/core.hpp> #include <opencv2 ...

  10. 颜色color转为rgb格式

    function convertHexToRGB(color) {       if (color.length === 4) {             let extendedColor = &q ...