一个vue.js的语法示例和html的绑定示例

let detailApp = new Vue({
    el: "#detailApp",
    data: {
        question: {}
    },
    methods: {
        loadQuestion: function () {
            //获得url路径上?之后的内容
            let qid = location.search;
            console.log(qid);
            //判断qid必须存在,如果不存在直接报错返回
            if (!qid) {
                alert("请指定问题的id");
                return;
            }
            //现在qid是?151这样的格式,我们需要去掉?留下151
            qid = qid.substring(1);
            $.ajax({
                //  /v1/questions/151
                url: "/v1/questions/" + qid,
                method: "get",
                success: function (r) {
                    console.log(r);
                    if (r.code == OK) {
                        detailApp.question = r.data;
                        addDuration(detailApp.question);
                    } else {
                        alert(r.message);
                    }
                }
            })
        }
    },
    created: function () {
        this.loadQuestion();
    }
})

let postAnswerApp=new Vue({
    el:"#postAnswerApp",
    data:{
        message:"",
        hasError:false
    },
    methods:{
        postAnswer:function(){
            //获得?之后的内容
            let qid=location.search;
            if(!qid){
                this.message="必须编写问题id"
                this.hasError=true;
                return;
            }
            qid=qid.substring(1);
            //获得富文本编辑器中的value来做回答内容
            let content=$("#summernote").val();
            if(!content){
                this.message="必须填写答案内容";
                this.hasError=true;
                return;
            }
            //声明一个json格式包含id和content
            let form={
                questionId:qid,
                content:content
            }
            $.ajax({
                url:"/v1/answers",
                method:"post",
                data:form,
                success:function(r){
                    if(r.code==CREATED){
                        //r.data是新增的Answer对象的json格式
                        //将这个新增的answer对象添加到下面回答列表的
                        // 数组中即可实现新增的同时显示在页面上
                        answersApp.answers.push(r.data)
                        r.data.duration="刚刚";
                        //清空summernote富文本编辑器的内容
                        $("#summernote").summernote("reset");
                        postAnswerApp.message=r.message;
                        postAnswerApp.hasError=true;
                    }else{
                        postAnswerApp.message=r.message;
                        postAnswerApp.hasError=true;
                    }
                }
            })
        }
    }
})

let answersApp =new Vue({
    el:"#answersApp",
    data:{
        answers:[]
    },
    methods:{
        loadAnswers:function(){
            let qid=location.search;
            if(!qid){
                alert("问题id不能为空");
                return;
            }
            //去掉?
            qid=qid.substring(1);
            $.ajax({
                url:"/v1/answers/question/"+qid,
                method:"get",
                success:function(r){
                    console.log(r);
                    if(r.code == OK){
                        answersApp.answers=r.data;
                        //计算当前查询出的所有回答的持续时间
                        answersApp.updateDuration();
                    }else{
                        alert(r.message);
                    }
                }
            })
        },
        updateDuration:function(){
            for(let i=0;i<this.answers.length;i++){
                addDuration(this.answers[i]);
            }
        },
        postComment:function(answerId){
            //获得当前回答的多行文本框对象
            let textarea=$("#addComment"+answerId+" textarea");
            //从多行文本框对象中获得用户编写的评论
            let content=textarea.val();
            if(!answerId || !content){
                alert("信息不全!");
                return;
            }
            let form={
                answerId:answerId,
                content:content
            }
            console.log(form);
            $.ajax({
                url:"/v1/comments",
                method:"post",
                data:form,
                success:function(r){
                    console.log(r);
                    if(r.code==CREATED){
                        //清空textarea内容
                        textarea.val("");
                        //获得要新增到页面上的评论对象
                        let comment=r.data;
                        //为了方便遍历将answers提取成局部变量
                        let answers=answersApp.answers;
                        //遍历answers根据当前新增评论的回答id,
                        // 找到新增评论的回答
                        for(let i=0;i<answers.length;i++){
                            //判读当前回答和新增评论的回答id相等
                            if(answers[i].id==answerId){
                                //就将新增的评论追加到当前回答的评论数组后
                                answers[i].comments.push(comment);
                                //退出循环
                                break;
                            }
                        }
                    }else{
                        alert(r.message);
                    }
                }
            })
        },
        removeComment:function(commentId,answer,index){
            if(!commentId){
                alert("评论id不能是空")
                return;
            }
            $.ajax({
                // /v1/comments/50/delete
                url:"/v1/comments/"+commentId+"/delete",
                method:"get",
                success:function(r){
                    console.log(r);
                    if(r.code==GONE){
                        //js提供了一个从数组中删除元素的方法
                        //  数组对象.splice(index,num)
                        // 上面代码的意思是从数组对象的index位置删除num个元素
                        answer.comments.splice(index,1);
                    } else{
                        alert(r.message);
                    }
                }
            })
        },
        updateComment:function(commentId,answer,index){
            let textarea=$("#editComment"+commentId+" textarea");
            let content=textarea.val();
            if(!commentId || !content){
                alert("信息不全");
                return;
            }
            $.ajax({
                url:"/v1/comments/"+commentId+"/update",
                method:"post",
                data:{content:content},
                success:function(r){
                    console.log(r)
                    if(r.code==OK){
                        //将修改的信息显示在页面上
                        //Vue.set(要修改的数组,要修改的元素下标,修改成什么对象)
                        Vue.set(answer.comments,index,r.data);
                        //将当前修改div收起
                        $("#editComment"+commentId).collapse("hide");
                    }else{
                        alert(r.message);
                    }
                }
            })
        },
        answerSolved:function(answerId){
            $.ajax({
                url:"/v1/answers/"+answerId+"/solved",
                method:"get",
                success:function(r){
                    console.log(r)
                    if(r.code==OK){
                        alert(r.message);
                    }else{
                        alert(r.message);
                    }
                }
            })
        }
    },
    created:function(){
        this.loadAnswers();
    }
})

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>我要提问</title>

  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../bower_components/summernote/dist/summernote-bs4.min.css">
  <link rel="stylesheet" href="../bower_components/select2/dist/css/select2.min.css">
  <link rel="stylesheet" href="../bower_components/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css">
  <link rel="stylesheet" href="../bower_components/vue-select/dist/vue-select.css">

  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  <script src="../bower_components/popper.js/dist/umd/popper.min.js"></script>
  <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="../bower_components/polyfill/dist/polyfill.min.js"></script>
  <script src="../bower_components/summernote/dist/summernote-bs4.js"></script>
  <script src="../bower_components/summernote/dist/lang/summernote-zh-CN.min.js"></script>
  <script src="../bower_components/vue/dist/vue.js"></script>
  <script src="../bower_components/select2/dist/js/select2.min.js"></script>
  <script src="../bower_components/select2/dist/js/i18n/zh-CN.js"></script>
  <script src="../bower_components/vue-select/dist/vue-select.js"></script>

</head>
<body>
<header class="container-fluid mb-3 bg-light">

  <nav class="navbar navbar-expand-lg   navbar-light bg-light">
    <a class="navbar-brand" href="../index.html"> <img alt="稻草问答"
                                                       src="../img/straw_logo_239x80.png" height="33">
    </a>
    <button class="navbar-toggler" type="button"
            data-toggle="collapse" data-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup" aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="../index.html">首页</a>
        <a class="nav-item nav-link active" href="../personal/myQuestion.html">提问</a>
        <a class="nav-item nav-link active" href="../personal/task.html">任务</a>
        <a class="nav-item nav-link active" href="../personal/collect.html">收藏</a>
      </div>

    </div>

    <div class="form-inline my-2 my-lg-0" id="searchApp">
      <input class="form-control form-control-sm mr-sm-2 rounded-pill" v-model="keyword" type="search"
             placeholder="Search"  aria-label="Search">
      <button class="btn btn-sm btn-outline-secondary my-2 my-sm-0 rounded-pill" type="button" ><i
              class="fa fa-search" aria-hidden="true"></i></button>
    </div>
    <a type="button" class="btn btn-outline-primary btn-sm mx-2" href="../question/create.html">我要提问</a>
    <div id="noticeCount">
      <button type="button" class="btn btn-default btn-xs fa fa-bell-o" data-toggle="modal" data-target="#noticeModal">
        <span class="badge badge-warning badge-pill">2</span>
      </button>
    </div>
    <div class="dropdown   py-1 mr-3 ">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
        <img style="width: 30px;height: 30px;border-radius: 50%;"
             src="../img/user.jpg">
      </button>
      <div class="dropdown-menu dropdown-menu-sm-left text-sm border-0" aria-labelledby="dropdownMenu2">
        <a class="dropdown-item " href="../personal/userInfo.html">账号设置</a>
        <div class="dropdown-divider"></div>
        <button data-toggle="modal" data-target="#invitecodeModal" class="dropdown-item btn-default">查看邀请码
        </button>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item " href="../login.html">注销登录</a>
      </div>
    </div>
  </nav>
  <!-- 消息modal-->
  <div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <div id="myTab" role="tablist" class="nav nav-tabs">
              <a href="#commentNotice" class="nav-item nav-link active text-black" data-toggle="tab"
                 aria-controls="commentNotice" aria-selected="true">
                通知
              </a>
              <a href="#announcement" class="nav-item nav-link text-black" data-toggle="tab" aria-controls="announcement"
                 aria-selected="true">
                公告
              </a>
          </div>
          <div id="myTabContent" class="tab-content col-12">
            <div class="tab-pane fade show active row" id="commentNotice" role="tabpanel"
                 aria-labelledby="noAnswer-tab">
              <div class="list-group list-group-flush">
                <h6 class="text-dark my-2" style="display: none" >暂无新消息！</h6>
                <a href="../notice/all.html" style="display: none" class="text-info" >查看历史消息</a>
                <!--只显示10条消息-->
                <div class="list-group-item list-group-item-action">
                  <span>张三</span>
                  <strong style="display: none">回答了你的问题</strong>
                  <strong style="display: none">评论了您的回答</strong>
                  <strong style="display: none">评论了您的提问</strong>
                  <strong>向您提问</strong>
                  <a href="" class="text-info">Java中方法重载和重写的区别</a>
                </div>
              </div>
              <div class="col-12 mt-2 ">
                <a href="../notice/all.html" class="text-info">查看全部消息</a>
              </div>
            </div>
            <div class="tab-pane fade row" id="announcement" role="tabpanel" aria-labelledby="unSolve-tab">
              <p class="text-black mt-2">暂无公告！</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div><!-- 消息modal-->
  <!-- 查看邀请码modal-->
  <div class="modal fade" id="invitecodeModal" tabindex="-1" role="dialog" aria-labelledby="invitecodeModal"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-body">
          <table class="table">
            <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">班级</th>
              <th scope="col">邀请码</th>
              <th scope="col">有效期至</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <th scope="row">1</th>
              <td>JSD1912</td>
              <td>JSD1912-697441</td>
              <td>2020-05-18 23:26:05</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>JSD2001</td>
              <td>JSD2001-216850</td>
              <td>2020-05-18 23:26:05</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>JSD2002</td>
              <td>JSD2002-563302</td>
              <td>2020-05-18 23:26:05</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>JSD2003  </td>
              <td>JSD2003-285267</td>
              <td>2020-05-18 23:26:05</td>
            </tr>
            </tbody>
          </table>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div><!-- 查看邀请码modal-->
</header>
<div class="container-fluid bg-white mt-3">
  <div class="row">
    <div class="col-9 px-0 ">
      <div class="container-fluid bg-light" id="detailApp">
        <div class="row">
          <div class="col-2 px-0  ">
            <div class="container-fluid ">
              <div class="row  mt-4 mx-0 px-0" >
                <a class="btn btn-outline-danger btn-md rounded-lg fa fa-close " style="font-size: x-small">删除</a>
              </div>

              <div class="row mt-4 mx-0 px-0" >
                <a class="btn btn-outline-primary btn-md rounded-lg fa fa-edit " style="font-size: x-small"
                   href="../question/edit.html">编辑</a>
              </div>
              <div class="row mt-4 mx-0 px-0">
                <a class="btn btn-outline-info btn-md rounded-lg fa fa-pencil " style="font-size: x-small"
                   href="#writeAnswer">回答</a>
              </div>
              <div class="row mt-4 mx-0 px-0" id="collectApp">
                <a class="btn btn-outline-secondary btn-md rounded-lg fa fa-star "
                    style="font-size: x-small">收藏</a>
                <a  class="btn btn-outline-secondary btn-md rounded-lg fa fa-star "
                    style="font-size: x-small;display: none" >已收藏</a>
              </div>

            </div>

          </div>
          <div class="col-10 px-0">
            <div class="container-fluid ">
              <div class="row px-0 mb-3">
                <div class="col-9 px-0">
                  <a class="badge badge-pill
                  badge-info mx-1" href="../tag/tag_question.html"
                    v-for="tag in question.tags" v-text="tag.name">
                    Java基础</a>
                </div>
                <div class="col-3 px-0">
                  <div class="row px-0">

                    <div class="col border-right text-right">
                      <p class="font-weight-light mb-0">收藏</p>
                      <p class="font-weight-bold mt-1">1</p>
                    </div>
                    <div class="col">
                      <p class="font-weight-light mb-0">浏览</p>
                      <p class="font-weight-bold mt-1"
                        v-text="question.pageViews">100</p>
                    </div>
                  </div>
                </div>
              </div>
              <p class=" px-0 text-center font-weight-bold"
                 style="font-size: x-large" v-text="question.title" >
                Java中方法重载和重写的区别
              </p>

              <div class="px-0 container-fluid question-content"
                  v-html="question.content">
                请问的方法中重写和重载的区别都是什么，如何使用
              </div>
              <p class="text-right px-0 mt-5">
                <span class="font-weight-light badge badge-primary"
                  v-text="question.userNickName">张三</span>
                <span class="font-weight-light badge badge-info"
                  v-text="question.duration">3天前</span>
              </p>
            </div>

          </div>
        </div>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <!--列出所有的答案-->
            <div class="row mt-5 ml-2" id="answersApp">
              <div class="col-12">
                <div class="well-sm"><p>
                  <span v-text="answers.length">3</span>
                  条回答</p></div>
                <div class="card card-default my-5"
                  v-for="answer in answers">
                  <!-- Default panel contents -->
                  <div class="card-header">
                    <div class="row">
                      <div class="col-1">
                        <img style="width: 50px;height: 50px;border-radius: 50%;"
                             src="../img/user.jpg">
                      </div>
                      <div class="col-8 ">
                        <div class="row">
                          <span class="ml-3"
                            v-text="answer.userNickName">张三</span>
                        </div>
                        <div class="row">
                          <span class="ml-3"
                            v-text="answer.duration">2天前</span>
                        </div>
                      </div>
                      <div class="3">
                      </div>
                    </div>
                  </div>
                  <div class="card-body ">
                    <span class="question-content text-monospace"
                          v-html="answer.content">
                      方法的重载是overloading，方法名相同，参数的类型或个数不同，对权限没有要求
                      方法的重写是overrding 方法名称和参数列表，参数类型，返回值类型全部相同，但是所实现的内容可以不同，一般发生在继承中
                    </span>
                    <a class="text-primary ml-2" style="font-size: small"
                       href="../answer/edit.html">
                      <i class="fa fa-edit"></i>编辑
                    </a>

                    <a class="ml-2  fa fa-close " style="font-size: small">
                      删除
                    </a>

                  </div>
                  <div class="card-footer">
                    <p class="text-success fa fa-comment">
                      <span v-text="answer.comments.length">1</span>
                      条评论</p>
                    <ul class="list-unstyled mt-3">
                      <!--
                      v-for中(comment,index)的含义是
                      ()中的第一个参数comment仍然代表循环过程中数组中的元素
                      ()中的第二个参数index是表示循环的索引值,从0开始
                      当我们的循环需要这个索引值时,就声明它
                       -->
                      <li class="media my-2" v-for="(comment,index) in answer.comments">
                        <img style="width: 50px;height: 50px;border-radius: 50%;"
                             src="../img/user.jpg" class="mr-3"
                             alt="...">
                        <div class="media-body">
                          <h6 class="mt-0 mb-1">
                            <span v-text="comment.userNickName">李四</span>:</h6>
                          <p class="text-dark">
                            <span class="text-monospace"
                              v-text="comment.content">
                              明白了,谢谢老师！
                            </span>
                            <span class="font-weight-light text-info"
                                  style="font-size: small"></span>
                            <a class="text-primary ml-2"
                               style="font-size: small" data-toggle="collapse" href="#editCommemt1"
                               role="button" aria-expanded="false"
                               aria-controls="collapseExample"
                               v-bind:href="'#editComment'+comment.id">
                              <i class="fa fa-edit"></i>编辑
                            </a>
                            <!--老师角色或者属于本用户的评论可以删除该评论-->
                            <a class="ml-2  fa fa-close " style="font-size: small"
                               data-toggle="collapse"  role="button"
                               aria-expanded="false"
                               aria-controls="collapseExample"
                               οnclick="$(this).next().toggle(300)"
                                >
                              删除
                            </a>
                            <!-- 下面是确认删除的图标,默认是隐藏的  -->
                            <a class="badge badge-pill badge-danger text-white"
                              style="display: none;cursor: pointer"
                              @click="removeComment(comment.id,answer,index)">
                              <i class="fa fa-close"></i>
                            </a>

                          </p>
                          <div class="collapse" id="editCommemt1"
                              v-bind:id="'editComment'+comment.id">
                            <div class="card card-body border-light">
                              <form action="" method="post" class="needs-validation"
                                    novalidate
                                  v-on:submit.prevent="updateComment(comment.id,answer,index)">
                                <div class="form-group">
                                  <textarea class="form-control"
                                            id="textareaComment1" name="content" rows="4"
                                            required
                                            v-text="comment.content"></textarea>
                                  <div class="invalid-feedback">
                                    内容不能为空！
                                  </div>
                                </div>
                                <button type="submit" class="btn btn-primary my-1 float-right">提交修改</button>
                              </form>
                            </div>
                          </div>
                        </div>
                      </li>

                    </ul>
                    <p class="text-left text-dark">
                      <a class="btn btn-primary mx-2"
                         href="#">采纳答案</a>
                      <a class="btn btn-outline-primary"
                         data-toggle="collapse" href="#collapseExample1"
                         role="button" aria-expanded="false"
                         aria-controls="collapseExample"
                         v-bind:href="'#addComment'+answer.id">
                        <i class="fa fa-edit"></i>添加评论
                      </a>

                    </p>
                    <div class="collapse" id="collapseExample1"
                      v-bind:id="'addComment'+answer.id">
                      <div class="card card-body border-light">
                        <form action="#" method="post"
                              class="needs-validation" novalidate
                              v-on:submit.prevent="postComment(answer.id)">
                          <div class="form-group">
                            <textarea class="form-control" name="content" rows="3" required></textarea>
                            <div class="invalid-feedback">
                              评论内容不能为空！
                            </div>
                          </div>
                          <button type="submit" class="btn btn-primary my-1 float-right">提交评论</button>
                        </form>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </div><!--列出所有的答案-end-->
            <!--如果没有回答问题的权限就不显示回答框-->
            <div class="container-fluid mt-4" id="postAnswerApp">
              <h5 class="text-info mb-2"><i class="fa fa-edit"></i>写答案</h5>
              <form action="#" method="post" enctype="application/x-www-form-urlencoded"
                    class="needs-validation" novalidate
                    v-on:submit.prevent="postAnswer">
                <div class="form-group">
                  <textarea id="summernote" name="content" required ></textarea>
                  <div class="invalid-feedback" style="display:none;"
                    v-bind:class="{'d-block':hasError}">
                    <p v-text="message">回答内容不能为空！</p>
                  </div>
                </div>
                <div class="form-group">
                  <p class="text-right">
                    <button type="submit" class="btn btn-primary">提交回答</button>
                  </p>

                </div>
              </form>

            </div>

          </div>

        </div>


      </div>
    </div>


    <div class="col-3">
      <!--相关提问-->
      <div class="container-fluid bg-light pb-2">
        <h5 class=" py-3 font-weight-light"><i class="fa fa-list mr-1" aria-hidden="true"></i>相关提问</h5>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>
        <div class="list-group list-group-flush" >
          <a href="../question/detail.html" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h6 class="mb-1 text-dark" >equals和==的区别是啥</h6>
            </div>
            <div class="row">
              <div class="col-7">
                <small class="mr-2">1条回答</small>
                <small class="text-warning" style="display: none">未回复</small>
                <small class="text-info" style="display: none">未解决</small>
                <small class="text-success">已解决</small>
              </div>
              <div class="col-5 text-right">
                <small>10浏览</small>
              </div>
            </div>
          </a>
        </div>

      </div>
    </div>
  </div>

</div>

<!--底部-->
<footer  class="container-fluid  bg-light mt-1 py-3">
  <p class="text-center font-weight-light">达内教育-Java教研部 版权所有<br><a href="http://tedu.cn" rel="nofollow" target="_blank">京ICP备16053980号-3</a>
  </p>
</footer>
<script>
  $(document).ready(function() {
    $('#summernote').summernote({
      height: 300,
      tabsize: 2,
      lang: 'zh-CN',
      placeholder: '请输入问题的详细描述...'
    });
    $('select').select2({placeholder:'请选择...'});
  });
</script>
</body>
<script src="../js/utils.js"></script>
<script src="../js/question_detail.js"></script>
</html>