前端笔记Vue项目day1(八）

案例选项卡1、 HTML 结构

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

`     <div id="app">         <div class="tab">             <!--  tab栏  -->             <ul>                 <li class="active">apple</li>                 <li class="">orange</li>                 <li class="">lemon</li>             </ul>               <!--  对应显示的图片 -->             <div class="current"><img src="img/apple.png"></div>             <div class=""><img src="img/orange.png"></div>             <div class=""><img src="img/lemon.png"></div>         </div>     </div>     `

2、 提供的数据

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13

list: [{                     id: 1,                     title: 'apple',                     path: 'img/apple.png'                 }, {                     id: 2,                     title: 'orange',                     path: 'img/orange.png'                 }, {                     id: 3,                     title: 'lemon',                     path: 'img/lemon.png'                 }]

3、 把数据渲染到页面

• 把tab栏 中的数替换到页面上

  • 把 data 中 title  利用 v-for 循环渲染到页面上

  • 把 data 中 path利用 v-for 循环渲染到页面上

  • [AppleScript] 纯文本查看 复制代码

    ?

    01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

    <div id="app">         <div class="tab">              <ul>                   <!--                      1、绑定key的作用 提高Vue的性能                     2、 key 需要是唯一的标识 所以需要使用id， 也可以使用index ，                         index 也是唯一的                     3、 item 是 数组中对应的每一项                      4、 index 是 每一项的 索引                 -->                    <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>               </ul>               <div  :key='item.id' v-for='(item, index) in list'>                     <!-- :  是 v-bind 的简写   绑定属性使用 v-bind -->                     <img :src="item.path">               </div>         </div>     </div> <script>     new  Vue({         //  指定 操作元素 是 id 为app 的         el: '#app',             data: {                 list: [{                     id: 1,                     title: 'apple',                     path: 'img/apple.png'                 }, {                     id: 2,                     title: 'orange',                     path: 'img/orange.png'                 }, {                     id: 3,                     title: 'lemon',                     path: 'img/lemon.png'                 }]             }     })   </script>