标签：mit cti class elf vue.js asc java end hsi
最近看到了一个眼镜在线试戴小项目使用纯js手写的，本人刚学习vue.js没多久，便试试用vue做做看了，还没完善。
其中包括初始图片加载，使用keywords查找，父子组件之间传递信息，子组件之间传递信息
1. 使用keywords查找
1.1 给每个li添加初始data
smallImg: [
{
keywords: "椭圆脸",
src: "images/model_1.jpg",
addClass: false
},
{
keywords: "圆形脸",
src: "images/model_2.jpg",
addClass: false
},
...
]
1.2 添加方法
// 搜索脸型
addCurrent: function (index){
// li样式添加
this.faceType[index].isTrue=true;
this.faceType[this.oldIndex].isTrue=false;
this.oldIndex=index;
// 搜索脸型
var type=this.faceType[index].type;
this.smallImg.forEach(function (val,index){
// 先都不加class
val.addClass=false;
// 若关键字不等于脸型则添加class
if(val.keywords!=type){
val.addClass=true;
}
});
// 点击全部，则所有的都不添加class
if(index==0){
this.smallImg.forEach(function (val,index){
// 先都不加class
val.addClass=false;
});
}
}
2. 子组件向父组件发送数据
2.1 点击任意眼镜触发showGlass()事件
<script type="text/template" id="galsslist">
<div class="galsslist">
<ul class="clearfix">
<li v-for="(val,index) in glass" @click="showGlass(index)" v-if="val.show">
<img :src="val.src" >
<h4>{{ val.title }}</h4>
<p>{{ val.text }}</p>
</li>
</ul>
</div>
</script>
2.2 子组件发射togg()事件到父组件，并传递点击的index值
showGlass: function (index){
this.$emit("togg",index);
},
2.3 父组件自定义事件
<!-- 自定义事件，子组件向父组件发送数据 --> <galsslist @togg="showBig"></galsslist>
2.4 执行showBig()事件，佩戴选择的眼镜
showBig: function (index){
this.bigGlassImg="images/glass_"+(index+1)+".png";
this.showbigGlassImg=true;
}
3. 子组件之间传递信息
3.1 先在index的data中定义 bus: new Vue(),
3.2 点击搜索在子组件触发search事件，发射事件 sear(), 并传递sendMsg信息
// 向另一个组件传递信息
search: function (){
var sendMsg=this.toggArr[0].msg;
this.$root.bus.$emit("sear",sendMsg);
}
3.3 执行事件sear()，并修改this.searchKey,并触发searchKeywords()事件
// 接收另一组件传递的信息
created: function (){
var self=this;
this.$root.bus.$on("sear",function (val){
self.searchKey=val;
self.searchKeywords();
})
},
beforeDestory: function (){
this.$root.bus.$off("sear");
}
3.4 显示与之匹配的眼镜
searchKeywords: function (){
this.glass.forEach(function (val,index){
// 先全部显示
val.show=true;
var key=val.title.split("_")[0];
// key不相等，则隐藏
if(key!=this.searchKey){
val.show=false;
}
},this);
// 为全部则全部显示
if(this.searchKey=="全部"){
this.glass.forEach(function (val,index){
// 全部显示
val.show=true;
});
}
}
4. github地址 （https://github.com/hsiangleev/proj-eyeglass.git）
标签：mit cti class elf vue.js asc java end hsi
原文地址：http://www.cnblogs.com/hsianglee/p/7613241.html
