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> ...
随机推荐
- swagger文档使用
https://www.cnblogs.com/suizhikuo/p/9397417.html
- [CF1034A] Two Rabbits - 数学
判断能否整除即可 #include <bits/stdc++.h> using namespace std; int x,y,a,b; int main() { int t; ios::s ...
- normalization flow
from Eric Jang Normalizing flows transform simple densities (like Gaussians) into rich complex distr ...
- C#关于文件的创建
若使用文件夹Directory类判断了文件夹的存在,后面的文件就不需要使用File类来判断文件的存在与否和创建,只需要在前面判断过得文件夹路径后面加上文件的名字即可,它会自动判断文件是否存在,若不存在 ...
- C#中常见的winform控件命名规范 转
我们知道Button 常常简称为btn,那么Winform中的其它控件呢,这篇文章在C#的winform控件命名规范 的基础上对一些控件的名称的简称进行了整理. 1. 标准控件 NO. 控件类型简写 ...
- OpenCV中imread失败cvLoadImage成功
MYLAF 环境说明 编程环境:Windows 10(64bit), VS2013, OpenCV 2.4.12; 编程语言:C/C++: MYLAF 现象 在代码中,调用imread读取图片失败,但 ...
- python之路函数
1.函数参数,引用 2.lambda表达式 lambda表达式 f1 = lambda a1,a2: a1+a2 3.python的内置函数 abs(),绝对值 all(),循环参数,如果每个元素都为 ...
- 并查集-F - How Many Tables
F - How Many Tables 并查集的模板都能直接套,太简单不注释了,就存个代码 #include<bits/stdc++.h> using namespace std; ; i ...
- C#源码转PlantUml
1.下载编译开源工程PlantUmlClassDiagramGenerator 2.使用PlantUmlClassDiagramGenerator生成PlantUml文件 3.配置Vscode的Pla ...
- IntelliJ IDEA 2017.3百度-----文件树状结构