今天写项目时遇到了一个坑，情景描述如下：
用v-for创建了8个li，每个li都有一个类按钮（下文就称之为按钮），点击该按钮时，e.target的背景图片发生变化，再点击该按钮e.target的背景图片又恢复成初始状态，如此循环。
未点击时效果图：
初始状态.png
点击后：
第一次点击后.png
如果只是用js,很容易解决，可在vue组件中并非如此了。
开始的时候，只写了一个控件来切换背景图片，但是类似于this.item=!this.item表达式并不能如愿切换。
然后就写了两个控件，不同控件不同背景图，在设置样式时让他们重叠，通过v-show指令来决定显示哪个控件。在这里，v-show监控的值也是变化的。这样对用户来说，“还是一个按钮”。然而结果却是，数据如愿改变，dom元素的样式并没有随之变化。具体就是第二个控件显示的v-show的值始终不变。无论怎么修改数据（data,computed...），我自岿然不变，崩溃啊。
贴代码吧：
html部分：
<ul class="selectmenu">
<li v-for="(item,index) in createAccount.menu" class="col-md-3 col-xs-6" :key="index" :v-model="index">
<div class="item">
<div class="pic">
<img :src="'image/account/'+item.img" alt="">
<span v-show="unchecked[index]" :data-idx="index" class="selected" :style="selectStyle" @click="changeStyle()"></span>
<span v-show="unchecked[index]" :data-idx="index" class="selected" :style="selectedStyle" @click="changeStyle1()"></span>
</div>
<p>{{item.text}}</p>
<div v-show="item.ishelp" class="help">
<span>?</span>
<p v-show="item.helptext" class="helptext">{{item.helptext}}</p>
</div>
</div>
</li>
</ul>
js部分：
var CreateAccount={
template:"#tpl_createAccount",
data:function(){
return {
createAccount:{},
selectStyle:{
backgroundImage:'url(../image/account/icon_checkmark.png)',
backgroundPosition:'center center',
backgroundSize:'auto 100%',
backgroundRepeat:'no-repeat'
},
selectedStyle:{
backgroundImage:'url(../image/account/icon_checkmark_selected.png)',
backgroundPosition:'center center',
backgroundSize:'auto 100%',
backgroundRepeat:'no-repeat'
}
}
},
computed:{
unchecked:function(){
return [true,true,true,true,true,true,true,true]
},
checked:function(){
return [false,false,false,false,false,false,false,false]
}
},
created:function(){
this.$http.get("data/createaccount.json")
.then(function(res){
this.createAccount=res.data.data;
});
},
methods:{
changeStyle:function(e){
var e=event||window.event;
var tar=e.target.getAttribute("data-idx");
Vue.set(this.unchecked,tar,false);
Vue.set(this.checked,tar,true);
},
changeStyle1:function(e){
var e=event||window.event;
var tar=e.target.getAttribute("data-idx");
Vue.set(this.unchecked,tar,true);
Vue.set(this.checked,tar,false);
}
}
};
css就省略了。
绞尽脑汁，想到v-show的本质就是通过设置display:none实现元素的显隐，尽然这里v-show没办法做到，那就直接控制元素的display值吧。
于是改变代码：
html去掉v-show这一部分，如下：
<ul class="selectmenu">
<li v-for="(item,index) in createAccount.menu" class="col-md-3 col-xs-6" :key="index" :v-model="index">
<div class="item">
<div class="pic">
<img :src="'image/account/'+item.img" alt="">
<span :data-idx="index" class="selected" :style="selectStyle" @click="changeStyle()"></span>
<span :data-idx="index" class="selected" :style="selectedStyle" @click="changeStyle1()"></span>
</div>
<p>{{item.text}}</p>
<div v-show="item.ishelp" class="help">
<span>?</span>
<p v-show="item.helptext" class="helptext">{{item.helptext}}</p>
</div>
</div>
</li>
</ul>
js则在样式里添加上display，如下：
var CreateAccount={
template:"#tpl_createAccount",
data:function(){
return {
createAccount:{},
selectStyle:{
display:"block",
backgroundImage:'url(../image/account/icon_checkmark.png)',
backgroundPosition:'center center',
backgroundSize:'auto 100%',
backgroundRepeat:'no-repeat'
},
selectedStyle:{
display:"none",
backgroundImage:'url(../image/account/icon_checkmark_selected.png)',
backgroundPosition:'center center',
backgroundSize:'auto 100%',
backgroundRepeat:'no-repeat'
}
}
},
computed:{
unchecked:function(){
return [true,true,true,true,true,true,true,true]
},
checked:function(){
return [false,false,false,false,false,false,false,false]
}
},
created:function(){
this.$http.get("data/createaccount.json")
.then(function(res){
this.createAccount=res.data.data;
});
},
methods:{
changeStyle:function(e){
var e=event||window.event;
var tar=e.target.getAttribute("data-idx");
Vue.set(this.unchecked,tar,false);
Vue.set(this.checked,tar,true);
this.selectStyle.display="none";
},
changeStyle1:function(e){
var e=event||window.event;
var tar=e.target.getAttribute("data-idx");
Vue.set(this.unchecked,tar,true);
Vue.set(this.checked,tar,false);
this.selectStyle.display="block";
}
}
};
问题解决了吗？——————答案是：没-----有！
先不管样式是否完整，首先上述js代码中this.selectStyle依旧是组件中的全局变量，也就是会影响到所有的li里面的按钮，而并非仅仅是e.target。
再想办法吧！要改变的仅仅是e.target的。
直接设置e.target.style的值？当然啦，然而这里style要提前定义一下，不然会提醒你style未定义。
然后因为是两个span，一个是e.target，一个是e.target的替身（它的兄弟元素），需要把这个替身获取到。
中间过程省略，太伤心。
后来只是修改了js部分：
var CreateAccount={
template:"#tpl_createAccount",
data:function(){
return {
style:null,
createAccount:{},
selectStyle:{
display:"block",
backgroundImage:'url(../image/account/icon_checkmark.png)',
backgroundPosition:'center center',
backgroundSize:'auto 100%',
backgroundRepeat:'no-repeat'
},
selectedStyle:{
display:"none",
backgroundImage:'url(../image/account/icon_checkmark_selected.png)',
backgroundPosition:'center center',
backgroundSize:'auto 100%',
backgroundRepeat:'no-repeat'
}
}
},
computed:{
unchecked:function(){
return [true,true,true,true,true,true,true,true]
},
checked:function(){
return [false,false,false,false,false,false,false,false]
}
},
created:function(){
this.$http.get("data/createaccount.json")
.then(function(res){
// console.log(res.data);
this.createAccount=res.data.data;
});
},
methods:{
changeStyle:function(e){
var e=event||window.event;
var el=e.target;
var tar=e.target.getAttribute("data-idx");
var next=$(el).next()[0];
Vue.set(this.unchecked,tar,false);
Vue.set(this.checked,tar,true);
e.target.style=this.selectStyle;
e.target.style.display="none";
next.style=this.selectedStyle;
next.style.display="block";
next.style.backgroundImage='url(../image/account/icon_checkmark_selected.png)',
next.style.backgroundPosition='center center',
next.style.backgroundSize='auto 100%',
next.style.backgroundRepeat='no-repeat'
this.selectStyle=next.style;
// this.selectedStyle.display="block";
},
changeStyle1:function(e){
var e=event||window.event;
var el=e.target;
var tar=e.target.getAttribute("data-idx");
var pre=$(el).prev()[0];
Vue.set(this.unchecked,tar,true);
Vue.set(this.checked,tar,false);
e.target.style=this.selectedStyle;
pre.style.display="block";
pre.style.backgroundImage='url(../image/account/icon_checkmark.png)',
pre.style.backgroundPosition='center center',
pre.style.backgroundSize='auto 100%',
pre.style.backgroundRepeat='no-repeat'
this.selectedStyle=pre.style;
}
}
};
很麻烦吧！我也觉得。曾尝试着删除一部分看似能删除的代码，结果是不能删。
你以为这样问题就解决了吗？只是解决了一部分。
第一次点击和第二次点击都没有问题（忽略那个报错吧，还木有想到办法避免，重要的是想要的结果出来了），但是第三次第四次点击的时候就没有效果啦。。。。。。问题出在哪里呢？就是第三次点击的时候e.target没有如愿变成第一个span，而且第一个span没有了样式。
....好吧，我能说在发布完文章后，我又去修改了一下代码，仅仅只是加了一行代码而已，问题就解决了吗？泪崩！
changeStyle1:function(e){
var e=event||window.event;
var el=e.target;
var tar=e.target.getAttribute("data-idx");
var pre=$(el).prev()[0];
Vue.set(this.unchecked,tar,true);
Vue.set(this.checked,tar,false);
e.target.style=this.selectStyle;
e.target.style.display="none";
pre.style=this.selectedStyle;
pre.style.display="block";
pre.style.backgroundImage='url(../image/account/icon_checkmark.png)',
pre.style.backgroundPosition='center center',
pre.style.backgroundSize='auto 100%',
pre.style.backgroundRepeat='no-repeat'
}
就是那行e.target.style.display="none";
不过呢，还是觉得很麻烦，这些代码基本都是缺什么就添加什么添出来的。有没有小伙伴有更简单的办法呢？求分享咯!
————————————————————————————————
后来的优化：
https://www.jianshu.com/p/4fe1f4d90a5d
