转专业资格判断： 外专业的学生转入软件工程专业，要求加权平均成绩在85分以上，且无挂科。请实现：学生输入姓名和各科成绩，点击按钮之后判断是否符合转专业要求。假设课程数量为5门。加权平均成绩的计算为：计算每一门“成绩*学分”，并累加，再除以课程数。1.在界面设置一个按钮，并使用事件监听的方式为该按钮编写响应事件，实现基础功能。2.要求新增2个div，使用双向绑定数据的方式分别记录成功之后和不成功的关键信息

好的，根据您的要求，我可以提供以下示例代码：

HTML代码：

<div>
  <label for="name">姓名：</label>
  <input type="text" id="name" v-model="name">
</div>
<div>
  <label for="score1">课程1成绩：</label>
  <input type="number" id="score1" v-model="scores[0]">
  <label for="credit1">课程1学分：</label>
  <input type="number" id="credit1" v-model="credits[0]">
</div>
<div>
  <label for="score2">课程2成绩：</label>
  <input type="number" id="score2" v-model="scores[1]">
  <label for="credit2">课程2学分：</label>
  <input type="number" id="credit2" v-model="credits[1]">
</div>
<div>
  <label for="score3">课程3成绩：</label>
  <input type="number" id="score3" v-model="scores[2]">
  <label for="credit3">课程3学分：</label>
  <input type="number" id="credit3" v-model="credits[2]">
</div>
<div>
  <label for="score4">课程4成绩：</label>
  <input type="number" id="score4" v-model="scores[3]">
  <label for="credit4">课程4学分：</label>
  <input type="number" id="credit4" v-model="credits[3]">
</div>
<div>
  <label for="score5">课程5成绩：</label>
  <input type="number" id="score5" v-model="scores[4]">
  <label for="credit5">课程5学分：</label>
  <input type="number" id="credit5" v-model="credits[4]">
</div>
<button @click="checkQualification">判断资格</button>
<div v-if="isQualified">
  <p>恭喜 {{ name }}，您符合转专业要求！</p>
</div>
<div v-else-if="name">
  <p>很抱歉 {{ name }}，您不符合转专业要求。</p>
  <p>原因：{{ reason }}</p>
</div>

Vue.js代码：

new Vue({
  el: '#app',
  data: {
    name: '',
    scores: [0, 0, 0, 0, 0],
    credits: [0, 0, 0, 0, 0],
    isQualified: false,
    reason: ''
  },
  methods: {
    checkQualification() {
      let totalScore = 0;
      let totalCredit = 0;
      for (let i = 0; i < 5; i++) {
        totalScore += this.scores[i] * this.credits[i];
        totalCredit += this.credits[i];
        if (this.scores[i] < 60) {
          this.isQualified = false;
          this.reason = '您有科目不及格';
          return;
        }
      }
      let weightedAvgScore = totalScore / totalCredit;
      if (weightedAvgScore >= 85) {
        this.isQualified = true;
      } else {
        this.isQualified = false;
        this.reason = '加权平均成绩不达标';
      }
    }
  }
});

解释：

1. HTML代码部分包含了一个输入姓名和各科成绩的表单，以及一个判断资格的按钮。同时，还有两个div，分别用于显示成功和失败的信息。在Vue.js中，我们使用`v-model`指令实现了双向绑定，将表单数据与Vue实例的数据属性进行关联。
2. Vue.js代码部分定义了一个Vue实例，其中包含了数据属性、方法等。`checkQualification()`方法用于判断是否符合转专业要求，根据条件设置`isQualified`和`reason`两个数据属性。在HTML代码中，我们使用`v-if`和`v-else-if`指令根据`isQualified`和`reason`的值来决定显示哪个div。