VUE style 绑定
<!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 绑定的更多相关文章
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...
- Vue中class与style绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
- Vue学习4：class与style绑定
说明:有些部分我只是相当于做一个学习笔记,加强记忆之用.所以可能阅读性不是那么强.如果有参考我这类博客的人,那么请见谅. 代码如下: <!DOCTYPE html> <html la ...
- vue从入门到进阶：Class 与 Style 绑定（四）
绑定 HTML Class 对象语法 ①.添加单个class: <div v-bind:class="{ active: isActive }"></div> ...
- Vue中计算属性与class,style绑定
var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...
- vue基础——Class与Style绑定
Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见的需求. 因为它们都是属性,所以我们可以用v-bind来处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼 ...
- Vue教程：Class 与 Style 绑定（四）
绑定 HTML Class 对象语法 ①.添加单个class: <div v-bind:class="{ active: isActive }"></div> ...
随机推荐
- rabbitmq系列问题解决：406, "PRECONDITION_FAILED - inequivalent arg 'durable'
1. 安装rabbitmq,查看官网文档: https://www.rabbitmq.com/#getstarted 由于我是先安装了rabbitmq后自己随手创建了queue,后面又按照官方给的&q ...
- 连接数据库报错：ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)
报错: ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.soc ...
- jQuery遇到问题的小记
对jQuery动态加载到页面的数据进行处理的时候,要首先保证数据已经加载到页面上了.否则,处理不生效. 所以处理的代码应该保证在加载数据代码的后面. 这个问题源于对js的加载运行过程不熟悉.应该去了解 ...
- SpringBoot整合RabbitMQ出现org.springframework.amqp.AmqpException: No method found for class
@Component @RabbitListener(queues="my_fanout") public class Consumer { @RabbitHandler ...
- HTML连载62-固定定位练习、z-index属性
一.固定定位应用场景 1.练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- MySQL5.5升级至5.7
一.下载免安装MySQL5.7包 下载页面 下载链接 二.替换mysql的安装目录 解压mysql5.7 tar -zxf mysql-5.7.23-linux-glibc2.12-x86_64.ta ...
- （转）Hadoop 简介
转自:http://www.open-open.com/lib/view/open1385685943484.html mapreduce是一种模式,一种什么模式呢?一种云计算的核心计算模式,一种分布 ...
- 基于PO和单例设计模式用python+selenium进行ui自动化框架设计
一)框架目录的结构 二)config包当中的config.ini文件主要是用来存项目的绝对路径,是为了后续跑用例和生成测试报告做准备然后目前的配置文件大都会用yaml,ini,excel,还有.py也 ...
- 12c的PDB创建DIRECTORY要注意与PATH_PREFIX的关系（ORA-65254）
在创建PDB过程中如果使用了带PATH_PREFIX的参数,意味着在创建DIRECTORY目录时需要指定相对路径,而不能指定其它绝对路径.来自博客园AskScuti 11g整库作为一个PDB迁移至阿里 ...
- 53最大子序和.py
题目:给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 来源:https://leetcode-cn.com/problems/maximum-s ...