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 ...
- CLOUD将excel数据引入单据体
http://club.kingdee.com/forum.php?mod=viewthread&tid=989239 http://club.kingdee.com/forum.php?mo ...
- Angular 相关概念
1.XMLHttpRequest 对象(属于xmlJavascript) XMLHttpRequest 对象用于在后台与服务器交换数据. Ajax 是对XMLHttpRequest 的封装,XMLHt ...
- spring 切点表达式
spring切点表达式: 1.*通配符:该通配符主要用于匹配单个单词. 例如:execution(* com.bonnie.Controller.TestController.*()) 上述表达式表示 ...
- 【转】Error，java对常量池来说字符串xxx的UTF8表示过长的解决及其理解
做项目,客户端这里自己模拟json数据时,一时没忍住搞得json字符串太长了(idea上大概有600多行吧),这个问题就蹦出来了.老方法直接google.百度然后看到一堆有关String 字符串常量池 ...
- HTML网站右键禁用F12代码 屏蔽审查元素 防止修改页面代码
<script>//禁止右键 function click(e) { if (document.all) { if (event.button==2||event.button==3) { ...
- java注册界面及mysql连接
题目要求 完成注册界面及添加功能 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求显示“• ”或“*”表示输入位数,密码要求八位以上字母.数字组成.(1 ...
- how to activate XMind8 to pro version.
From activate Xmind 8. in step 3: run ./setup.sh in sudo command, and use the following command to r ...
- rancher布控集群启动失败的猜测
rancher布控集群启动失败的猜测 待办 报告缺少某个文件.多线程启动任务部署的时候某些线程跑在前边了, 导致问题出现 或者 网络问题出现超时,导致出现此类报错 或者 内存不足导致问题出现报错 或者 ...
- 题解【CJOJ1071/UVA】硬币问题
P1071 - [Uva]硬币问题 Description 有n种硬币,面值分别为v1, v2, ..., vn,每种都有无限多.给定非负整数S,可以选用多少个硬币,使得面值之和恰好为S?输出硬币数目 ...