Vue 学习 -02.v-for 指令 (数据迭代)

本贴最后更新于 1910 天前,其中的信息可能已经天翻地覆

1. html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <h2>v-for迭代指令</h2>
<ul>
    <li v-for="food in foodList">{{food.name}}:¥{{food.discount ? food.price * food.discount : food.price}}</li>
</ul>

</div>

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

</body>
</html>

2.js 代码

var app = new Vue({
    el: '#app' , //作用在id为app 的组件
    data: {
       foodList: [
           {
               name: '葱',
               price: 10,
               discount: .2,
           },
           {
               name: '姜',
               price: 12,
               discount: .5,
           },
           {
               name: '蒜',
               price: 5
           }
       ]
    }

});

3. 效果图

  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖 • 2 关注
  • 后端
    44 引用 • 126 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...