Question

vue.js 自定义属性

我有一个数组 var list = [{对象1}，{对象2}，{对象3}]，
使用v-for 循环到页面，html的结构如下：
<div class="box">
<div class="content" v-for="(item,index) in list" @click="meclick">
<span class="icon" :style="color" ></span>
//这个span是一个图标，类似于信息提醒有新消息的时候它是红色，读过之后它是灰色
<p>{{item.json}}</p>
</div>
</div>

new Vue({
el:".box",
data:{
color:"background:red"
},
methods:{
meclick:function(){
this.color = "background:#ccc"
}
}
})
//看过这段代码之后 ，应该能明白 我点击了content这个元素后，使data中的变量color的值也变成了background:#ccc，也就是说我点击了 content 它里面的span背景色本来是red，变为#ccc,但是当页面二次打开后，它的颜色又成为红色，应为页面刷新了，我想要做到的就是：“获取到数据以后循坏到页面，只要我是点击过的，不管任何时候，打开这个页面，这个span的背景色都为#ccc”,我是新手，问题有些幼稚，但是希望能带我爬出天坑！！在此感激不尽

Answer 1

，解决方案1： 你可以把你操作的值存储到本地数据里，也就是说，在页面加载的时候，首先获取location的值，如果没有这个记录，那就是红色，如果有就是#ccc,点击之后，将location.set('color',#ccc);同时把当前背景色也设为#ccc,这样，你下次打开的时候，还是#CCC，类似于一个皮肤功能 。
方案2：把你操作的结果保存到数据库，
vue({
created(){
在这里请求ajax，获取你要的颜色属性。
}
})；
方案3 ：单纯的CSS实现。设置伪类
：link{}
：active｛｝
具体如何，可以根据你的业务场景选用 。