<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>
5.Vue之组件(模版)
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...