11_PROJECT_DAY10

45. 我的问答列表-前端页面

在index.html页面，先找到整个列表区域的父级，为其添加id，以便于创建Vue对象：

<!-- 约第185行 -->
<div class="container-fluid" id="questionsApp">

找到每个问题的显示区域，为这个区域的根级添加v-for以循环显示：

<!-- 约第193行 -->
<div v-for="question in questions" class="media bg-white m-2 p-3">

关于问题的状态：

<span class="badge badge-pill" v-bind:class="[question.statusClass]" v-text="question.statusText">已解决</span>

问题的标题：

<a class="text-dark" href="question/detail.html" v-text="question.title">eclipse 如何导入项目？</a>

问题的内容：

<div class="font-weight-light text-truncate text-wrap text-justify mb-2" style="height: 70px;" v-html="question.content">
	<p>
		eclipse 如何导入项目？
	</p>
</div>

问题的标签列表：

<a v-for="tag in question.tags" class="text-info badge badge-pill bg-light" href="tag/tag_question.html">
    <small v-text="tag.name">Java基础</small>
</a>

右下角的更多信息：

<small class="list-inline-item" v-text="question.userNickName">风继续吹</small>
<small class="list-inline-item"><span v-text="question.hits">12</span>浏览</small>
<small class="list-inline-item" v-text="question.createdTimeText">13分钟前</small>

显示图片：

<img v-bind:src="question.tagImage" class="ml-3 border img-fluid rounded" alt="" width="208" height="116">

添加了标签之后，在static下的**/js/question/文件夹下创建my.js**文件，先创建出Vue对象，并配置一些模拟的数据：

let questionsApp = new Vue({
   
    el: '#questionsApp',
    data: {
   
        questions: [
            {
   
                statusText: '已解决',
                statusClass: 'badge-success',
                title: '这是第1个问题',
                content: '很<b>严肃</b>的提出了第1个问题',
                tags: [
                    {
    id: 8, name: 'Java基础' },
                    {
    id: 12, name: 'Spring' },
                    {
    id: 15, name: 'SpringBoot' }
                ],
                userNickName