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> ...
随机推荐
- shell变量内字符替换和变量字符修改
vi test.sh a= #将${a}里的第一个123替换为321 b=${a//}; echo "echo variable a" echo $a echo "ech ...
- PM2的参数配置
https://github.com/jawil/blog/issues/7 配置项: name 应用进程名称:script 启动脚本路径:cwd 应用启动的路径,关于script与cwd的区别 ...
- vue 报错碰到的一些问题及其规范
报错信息:Expected error to be handled(需要处理的错误) 这是因为回调函数里面的参数error没有运用到,所以可以不设置参数,或者在回调函数内console.log(err ...
- QuerySet的常用方法
QuerySet常用方法 使用 connection.queries 可以查看sql语句 filter 将满足条件的结果返回,返回值为QuerySet对象 exclude 将满足条件的结果过滤掉,返回 ...
- c# 让接口实现方法
interface IMy { } static class MyFunc { public static void Func<T>(this T obj) where T : IMy { ...
- Codeforces Round #603 (Div. 2) Ａ.Sweet Problem
#include <cstdio> #include <algorithm> using namespace std; int main() { int t; scanf(&q ...
- Exception in thread "http-apr-8080-exec-1" java.lang.StackOverflowError
Exception in thread "http-apr-8080-exec-1" java.lang.StackOverflowError 可能执行了递归,陷入了死循环 如下我 ...
- SpringMVC进行Ajax请求页面显示乱码
最近在项目的使用过程中发现在springmvc的项目中,使用返回页面的请求方式,数据都能正常显示,但是对于ajax的请求,始终显示乱码. 首先第一种是因为我们在web.xml中配置了spring的字符 ...
- U盘拷贝目标文件过大无法复制时的解决方法
在cmd下输入:convert U盘符:/fs:ntfs ---> 回车 转换完成后可以看到U盘属性为NTFS了 这时就可以复制大文件到U盘了
- JS高级---bind方法
bind方法 复制了一份的时候, 把参数传入到了f1函数中, x===>10, y===>20, null就是this, 默认就是window bind方法是复制的意思, 参数可以在复制的 ...