v-for练习，实现99乘法口诀表

最新推荐文章于 2023-09-02 09:32:41 发布

敲完代码去打球

最新推荐文章于 2023-09-02 09:32:41 发布

阅读量424

点赞数

分类专栏： Vue练习文章标签：前端 html vue.js

本文链接：https://blog.csdn.net/z3436/article/details/129049381

版权

Vue练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先放图

首先我们还是老规矩，创建div和span标签

<div id="app">
  <div>
    <span>
    </span>
  </div>
</div>

引入本地Vue

<script src="../js/vue.js"></script>

写入js

<script>
  const vm = new Vue({
    el: '#app',
  })
</script>

然后我们根据v-for加上逻辑，修改我们的HTML代码

<div id="app">
  <!-- 循环出1~9 -->
  <div v-for="n1 in 9">
    <!-- 再次循环，注意本次循环的是n1 -->
    <span v-for="n2 in n1">
      {{n1}}*{{n2}}={{n1*n2}}
    </span>
  </div>
</div>

<!-- 加上css，间距大更清晰 -->
span {
      display: inline-block;
      width: 70px;
      height: 30px;
    }