vue入门之条件渲染、列表渲染、style绑定和class绑定

avatar 2019年04月28日00:21:42 6 2684 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
详细参考官方文档：

https://cn.vuejs.org/v2/guide/conditional.html

https://cn.vuejs.org/v2/guide/list.html

https://cn.vuejs.org/v2/guide/class-and-style.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Vue入门, 条件渲染，列表渲染，style绑定，class绑定</title>
  6.   <script src="https://cdn.bootcss.com/vue/2.5.18/vue.min.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <!-- 1.条件渲染 -->
  11.         <div v-if="score >= 90"> 优秀 </div>
  12.         <div v-else-if="score < 90 && score >= 70"> 良好 </div>
  13.         <div v-else-if="score < 70 && score >= 60"> 一般 </div>
  14.         <div v-else> 不合格 </div>
  15.         <!-- v-show和v-if相似，但是也有区别 -->
  16.         <div v-show="score > 90">优秀</div>
  18.         <!-- 2.列表渲染 -->
  19.         <table border="1px solid #ccc;">
  20.             <tr>
  21.                 <td>姓名</td>
  22.                 <td>年龄</td>
  23.             </tr>
  24.             <tr v-for="item in list">
  25.                 <td>{{item.name}}</td>
  26.                 <td>{{item.age}}</td>
  27.             </tr>
  28.         </table>
  30.         <!-- 3.style绑定 -->
  31.         <div :style="goodStudent">{{msg}}</div>
  33.         <!-- 4.class绑定，都会有post和post-page；当commentSize>20，会加hot -->
  34.         <div :class="['post','post-page', {'hot': commentSize > 20}]"></div>
  35.     </div>
  36.     <script>
  37.         var app = new Vue({
  38.             el: '#app',
  39.             data: {
  40.                 score: 96,
  41.                 list: [{
  42.                     name: '小曌瞾',
  43.                     age: '18'
  44.                 },{
  45.                     name: '小凯凯',
  46.                     age: '8'
  47.                 },{
  48.                     name: '小琪琪',
  49.                     age: '12'
  50.                 }],
  51.                 msg: "我是小曌瞾",
  52.                 goodStudent: {
  53.                     color: 'red',
  54.                     textShadow: '0 0 5px yellow'
  55.                 },
  56.                 commentSize: 35
  58.             },
  59.         })
  60.     </script>
  62. </body>
  63. </html>

历史上的今天
四月
28日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0