先把叉叉畫上去

#root
  h1 {{title}}
  h3 {{subtitle}}
  .box
    .line(v-for="(col, index) in cols")
      .card(
        :style="rect"
      ) 
      .card(v-bind:style="rect2") 

 var vm = new Vue({
    el: '#root',
    data: {
      title: '簡單的小應用',
      subtitle:"圈圈叉叉",
      fruit: {
        title: '',
        color: ''
      },
      circle:{
        borderRadius:"50px",
        borderWidth:"2px",
        backgroundColor:"black",
      },
      circle2:{
        borderRadius:"50px",
        borderWidth:"2px",
        backgroundColor:"white",
      },
      rect:{
        marginLeft:"30px",
        position:"absolute",
        height:"100px",
        width:"10px",
        backgroundColor:"black",
        transform:"rotate(45deg)",
        zIndex:"1",
      },
      rect2:{
        marginLeft:"30px",
        position:"absolute",
        height:"100px",
        width:"10px",
        backgroundColor:"black",
        transform:"rotate(135deg)",
      },
      
      cols: [
        {
          position: '1',
          status:0,
        },
        {
          position: "2",
          status:0,
        },
        {
          position: "3",
          status:0,
        },
        {
          position: "4",
          status:0,
        },
        {
          position: "5",
          status:0,
        },
        {
          position: "6",
          status:0,
        },
        {
          position: "7",
          status:0,
        },
        {
          position: "8",
          status:0,
        },
        {
          position: "9",
          status:0,
        }
      ]
    },
    methods: {
      statusChange() {

      },
    }
  })

回家在把圈圈畫上去