【IMWeb训练营团队作业】模拟微信朋友圈

来源：互联网发布：ztree check源码编辑：程序博客网时间：2024/05/16 11:21

-.-历时两天多终于搞完了…正文看下面
主要的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'    });

最终运行效果图

0 0