-.-历时两天多终于搞完了…正文看下面
主要的Html代码
<main id="app">
<div style="margin-bottom: 30px">
<img src="images/title.jpg" style="width: 100%">
<div style="position: absolute;right: 0;top: 250px;">
<span>曾家兴</span>
<img src="images/touxiang.jpg" style="width: 80px;">
</div>
</div>
<div>
<custom></custom>
<custom></custom>
<custom></custom>
<custom></custom>
<custom></custom>
</div>
</main>
主要的Vue代码
Vue.component('custom',{
data:function () {
return {
selectShow:false,
selectZan:false,
message:['赞'],
inputShow:false,
pShow:false,
speak:''
};
},
props:['num'],
template:`<div style="position: relative;border-bottom: 1px solid gray;padding-bottom: 10px;">
<img src="images/img1.jpg" style="width: 30px;margin-left: 10px;float: left">
<div style="display: inline-block;width: 80%">
<a>哈哈</a>
<p>哈哈哈哈</p>
<img src="images/img1.jpg" style="width: 200px;height: 100px;">
<div style="padding-bottom: 10px;">
<span>10分钟前</span>
<button style="float: right" @click="selectShow = !selectShow" >。。</button>
<button style="float: right;" v-show="selectShow" @click="talk">评论</button>
<button style="float: right;width: 50px;" v-show="selectShow" @click="changeZan" v-model="message">{{message[0]}}</button>
</div>
<div style="background-color: #eeeeee" v-show="selectZan">
<span class="glyphicon glyphicon-heart"></span>
<span>曾家兴 </span>
<p v-show="pShow">曾家兴:{{speak}}</p>
<input v-show="inputShow" type="text" style="width: 100%;" v-model="speak">
</div>
</div>
</div>`,
methods:{
changeZan:function () {
this.selectZan = !this.selectZan;
this.selectShow = false;
if(this.message == '赞'){
this.message.splice(0,1,'取消');
}
else{
this.message.splice(0,1,'赞');
}
},
talk:function () {
this.inputShow = !this.inputShow;
if(this.speak.length > 0){
this.pShow = true;
}
else{
this.pShow = false;
}
}
}
});
new Vue({
el:'#app'
});
最终运行效果图