5.Vue之组件(模版)

<template>
    <div class="tmpl">
        <!-- 1.0 标题 -->
        <div class="twarp">
            <h2 v-text="info.title"></h2>
            <span class="desc">
                {{info.add_time  | datefmt}}  
                {{info.click}}次浏览
                 分类:民生
            </span>
        </div>

        <!-- 2.0 新闻详细展示区域 -->
        <div class="content" v-html="info.content"></div>

        <!-- 3.0 评论组件 -->
        <comment :artid="newsid"></comment>
    </div>
</template>

<script>
import common from '../../kits/common.js';
import { Toast } from 'mint-ui';

// 1.0 导入评论组件对象
import comment from '../subcom/comment.vue';
    export default{
        data(){
            return {
                info:{},
                newsid:0
            }
        },
        methods:{
            getinfo(){
                // 1.0 获取url传入的newsid
                var newsid  = this.$route.params.newsid;

                this.$http.get(common.apiDomain+'/api/getnew/'+newsid)
                .then(res=>{
                    if(res.body.status !==0){
                        Toast(res.body.message);
                        return;
                    }

                    this.info = res.body.message[0];
                });
            }
        },
        created(){
            // 初始化newsid
            this.newsid = this.$route.params.newsid;
            this.getinfo();
        },
            // 使用comment 组件
        components:{
            comment // comment:comment
        }
    }
</script>

<style scoped>
    .twarp h2{
        color:#0094ff;
        font-size:16px;
    }

    .twarp .desc{
        color:rgba(0,0,0,0.4);
        
    }

    .twarp{
        padding:10px;
        border-bottom: 1px solid rgba(0,0,0,0.4); 
    }
    .content{
        padding:5px;
    }
</style>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 之前学过vue,上一个项目做小程序,发现跟vue差不多,于是给一个星期的时间自己重拾vue,但是发现高估了自己,并...
    还有谁叫李狗蛋阅读 512评论 1 1
  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,202评论 8 124
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 6,090评论 0 42
  • 小的时候,我家和我大伯家比邻而居。我的堂姐大我十岁吧,可是她结婚早,十九岁就生了一个女儿。所以,我九岁就当了...
    文小西阅读 365评论 1 0
  • 石榴花 你开在五月 你开得比阳光还要亮 还要耀眼 石榴花 这么些花都开败了 你开得正是时候 石榴花 这么些花都开败...
    庆善阅读 340评论 0 1