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

详细参考官方文档:

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>
  17.         <!-- 2.列表渲染 -->
  18.         <table border="1px solid #ccc;">
  19.             <tr>
  20.                 <td>姓名</td>
  21.                 <td>年龄</td>
  22.             </tr>
  23.             <tr v-for="item in list">
  24.                 <td>{{item.name}}</td>
  25.                 <td>{{item.age}}</td>
  26.             </tr>
  27.         </table>
  28.         <!-- 3.style绑定 -->
  29.         <div :style="goodStudent">{{msg}}</div>
  30.         <!-- 4.class绑定,都会有post和post-page;当commentSize>20,会加hot -->
  31.         <div :class="['post','post-page', {'hot': commentSize > 20}]"></div>
  32.     </div>
  33.     <script>
  34.         var app = new Vue({
  35.             el: '#app',
  36.             data: {
  37.                 score: 96,
  38.                 list: [{
  39.                     name: '小曌瞾',
  40.                     age: '18'
  41.                 },{
  42.                     name: '小凯凯',
  43.                     age: '8'
  44.                 },{
  45.                     name: '小琪琪',
  46.                     age: '12'
  47.                 }],
  48.                 msg: "我是小曌瞾",
  49.                 goodStudent: {
  50.                     color: 'red',
  51.                     textShadow: '0 0 5px yellow'
  52.                 },
  53.                 commentSize: 35
  54.             },
  55.         })
  56.     </script>
  57. </body>
  58. </html>

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: