6.Vue分支语句 - 4.v-for之table - 《Web 前端工程师-2022》

<html>
  <head>
  </head>
  <body>
    <div id="app">
      <!-- tr：定义行，不能单独存在，应和th或td配合使用
     th：表示头部，默认是粗体居中的。th应当放在tr中
     td：表示单元格,td应当放在tr中 -->
      <table border="1">
        <tr>
          <th>序号</th></th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      </tr>
    <tr v-for="(student,i) in students">
      <td>{{i+1}}</td>
      <td v-for="(v,k,j) in student">{{set_student(v,k,j)}}</td>
      <!-- <th v-for="(v,k,j) in student">{{set_student(v,k,j)}}</th> -->
    </tr>
    </table>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    //指定作用于那一个div
    el:'#app',
    //属性
    data:{
      students:[
        {name:'小明',age:18,sex:1},
        {name:'小花',age:20,sex:0},
        {name:'小王',age:20,sex:1},
      ]
    },
    methods:{
      set_student:function(v,k,j){
        var result = v;
        if(j==2)
        {
          if(v==1)
            result='男';
          else
            result='女';
        }
        return result;
      }
    },
  });
</script>
</html>