前端渲染我的问题数据

/*
显示当前用户问题
 */
let questionsApp = new Vue({
    el:'#questionsApp',
    data:{
        myQuestions:[]
    },
    methods: {

        loadQuestions:function () {
            $.ajax({
                url: '/v1/question/my',
                method:"GET",
                success: function (r) {
                    console.log("成功加载数据");
                    console.log(r);
                    if (r.code = OK){
                        questionsApp.myQuestions = r.data;
                    }
                }

            });
        }
    },
    created:function () {
        console.log("执行了当前用户问题方法");
        this.loadQuestions();
    }
});

• 写入id，Method，created方法。
• 执行打印方法，确定id绑定无误
• 利用ajax通过接口获取数据，然后赋值给定义好的数据。打印数据，通过控制台查看数据是否正常。

界面

<!-- 我的问答 -->
<div class="container-fluid bg-light mt-3 mb-1">
    <div class="row">
        <div class="col-md-12 col-lg-8 pb-2" id="questionsApp">
            <div class="row">
                <div class="container-fluid">
                    <h4 class="border-bottom m-2 p-2 font-weight-light">
                        <i class="fa fa-comments-o" aria-hidden="true"></i> 我的问答
                    </h4>
                    <div class="row" style="display: none">
                        <div class="alert alert-warning w-100" role="alert">
                            抱歉您还没有提问内容， <a href="question/create.html" class="alert-link">您可以点击此处提问</a>，或者点击标签查看其它问答
                        </div>
                    </div>
                    <div class="media bg-white m-2 p-3" v-for="question in myQuestions">
                        <div class="media-body w-50">
                            <div class="row">
                                <div class="col-md-12 col-lg-2" >
                                    <span class="badge badge-pill badge-warning" style="display: none">未回复</span>
                                    <span class="badge badge-pill badge-info" style="display: none">已回复</span>
                                    <span class="badge badge-pill badge-success">已解决</span>
                                </div>
                                <div class="col-md-12 col-lg-10">
                                    <h5 class="mt-0 mb-1 text-truncate">
<!--                                        问题标题-->
                                        <a class="text-dark" href="question/detail.html" v-text="question.title">
                                            eclipse 如何导入项目？
                                        </a>
                                    </h5>
                                </div>
                            </div>
                            <div class="font-weight-light text-truncate text-wrap text-justify mb-2"
                                 style="height: 70px;">

                                <p v-html="question.content">
                                    eclipse 如何导入项目？
                                </p>
                            </div>
                            <div class="row">
                                <div class="col-12 mt-1 text-info">
                                    <i class="fa fa-tags" aria-hidden="true"></i>
                                    <a class="text-info badge badge-pill bg-light" href="tag/tag_question.html">
                                        <small>Java基础</small>
                                    </a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 text-right">
                                    <div class="list-inline mb-1 ">
                                        <small class="list-inline-item" v-text="question.userNickName">风继续吹</small>
                                        <small class="list-inline-item"><span v-text="question.pageViews">12</span>浏览</small>
                                        <small class="list-inline-item">13分钟前</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- / class="media-body"-->
                        <img src="img/tags/11.jpg" class="ml-3 border img-fluid rounded" alt="" width="208"
                             height="116">
                    </div>
                    <div class="row mt-2">
                        <div class="col-6 offset-3">
                            <nav aria-label="Page navigation example">
                                <div class="pagination">
                                    <a class="page-item page-link" href="#">上一页</a>
                                    <a class="page-item page-link " href="#">1</a>
                                    <a class="page-item page-link" href="#">下一页</a>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div> <!-- / class="col-8"-->
        </div>

• 绑定最外层div的id
• 通过循环渲染数组，对应的HTML标签中绑定内容。
• 内容的id可打印数据查看，也可查看实体类中的名字。