2021-07-01

最新推荐文章于 2021-11-10 17:26:45 发布

星语晨曦

最新推荐文章于 2021-11-10 17:26:45 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/myprogramstart/article/details/118389813

html 专栏收录该内容

12 篇文章

订阅专栏

第十二周周记

文章目录

第十二周周记

1.Vue.js 条件语句

1.条件判断

1.v-if
2.v-else
3.v-else-if
4.v-show
其中， v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

2.Vue.js 循环语句

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表。

1.v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据

<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '嗨',
      url: 'https://blog.youkuaiyun.com',
      slogan: '如果想要认识我，请到青年突击队里来！'
    }
  }
})
</script>
</body>

2.v-for 迭代整数

v-for 也可以循环整数

<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>
<script>
new Vue({
  el: '#app'
})
</script>
</body>