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> ...
随机推荐
- PHP函数对比 array_merge()与加号合并数组的区别
首先准备两个数组,从数组索引类型分别讨论. 数组索引为字符串索引时: $a = array('a' => 1, 'b' => 2, 'c' => 3); $b = array('b' ...
- python3练习100题——030
这周开始,要重新振作一点吧! 如果每天都想着消费升级,而不是想着如何投入时间精力让自己进步,未来根本就看不到希望. 我想要更认真的活着 live wild 原题链接:http://www.runoob ...
- 55.ORM外键：引用同app下的不同模型，引用不同app下的模型，引用模型自身使用详解
外键和表关系 外键是属于数据库级别的,在MySQL中,表有两种引擎,一种是InnoDB,另外一种是myisam.如果使用的是InnoDB引擎,是支持外键约束的.外键的存在使得ORM框架在处理表关系的时 ...
- Python之tcp server模拟Http通信
1.python tcp server代码: import socket def main(): tcp_server_socket = socket.socket(socket.AF_INET, s ...
- js中事件代理(委托）
var oul = document.getElementById(‘uli’); oul.onclick = function(e) { e = e || window.event; var tar ...
- jQuery---版本问题
jQuery的版本 官网下载地址:http://jquery.com/download/ jQuery版本有很多,分为1.x 2.x 3.x 大版本分类: 1.x版本:能够兼容IE678浏览器 2.x ...
- HTML的表单初级验证
HTML的表单初级验证 placeholder(提示信息) required(确保不能为空) pattern(正则表达式验证) 1. placeholder(提示信息) 语法: <p>账号 ...
- 控制台输出Scanner和BufferedReader区别
Scanner取得输入的依据是空格符,包括空格键,Tab键和Enter键.当按下这其中的任一键 时,Scanner就会返回下一个输入. 当你输入的内容中间包括空格时,显然,使用Scanner就不能完整 ...
- Spring boot --- 自动配置
spring boot 自动配置 指的是针对很多spring 应用程序常见的应用功能,spring boot 能自动提供相关配置. spring boot 自动配置加载 Spring boot ...
- cadence动态铜皮的参数设置
注意这幅图和上一幅图那个焊盘距离shape的间距,变大了,这个设置很用的.