Blogger Information
Blog 35
fans 0
comment 0
visits 16932
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0804-vue列表渲染、条件渲染、事件和键盘修饰符、计算和侦听器属性
三九三伏
Original
529 people have browsed it

一、 实例演示条件渲染与列表渲染

1. 列表渲染 v-for

  1. <div class="app">
  2. <ul>
  3. <!-- 数组 -->
  4. <li v-for="(city, index) of cities" :key="index">{{index}}:{{city}}</li>
  5. <!-- 对象 -->
  6. <li v-for="user of users" >{{user.name}}:{{user.email}}</li>
  7. <!-- 对象数组 -->
  8. <li v-for="(user, index) of users" :key="index">{{index}}->{{user.name}}:{{user.email}}</li>
  9. </ul>
  10. </div>
  11. <script>
  12. const app = Vue.createApp({
  13. // 实例数据
  14. data(){
  15. return {
  16. // array
  17. cities:['合肥', '苏州', '南京'],
  18. // object
  19. user: {
  20. name: '路人甲',
  21. email: 'lujia@php.cn',
  22. },
  23. //array of object
  24. users: [
  25. {
  26. name: '路人甲',
  27. email: 'lujia@php.cn',
  28. },
  29. {
  30. name: '路人乙',
  31. email: 'luyi@php.cn',
  32. },
  33. {
  34. name: '路人丙',
  35. email: 'lubign@php.cn',
  36. },
  37. ],
  38. };
  39. },
  40. }).mount('.app');
  41. </script>

2. 条件渲染 v-if

  1. <div class="app">
  2. <p v-if="flag">{{message}}</p>
  3. <button @click="flag=!flag" v-text="flag ? '隐藏' : '显示'"></button>
  4. <p v-if="point >=500 && point < 1000">{{grade[0]}}</p>
  5. <p v-else-if="point >=1000 && point < 2000">{{grade[1]}}</p>
  6. <p v-else-if="point >=2000 && point < 3000">{{grade[2]}}</p>
  7. <p v-else-if="point >=3000 ">{{grade[3]}}</p>
  8. <p v-else>{{grade[4]}}</p>
  9. </div>
  10. <script>
  11. const app = Vue.createApp({
  12. // 实例数据
  13. data(){
  14. return {
  15. message: '路人甲学完前端了',
  16. flag: true,
  17. // 会员级别
  18. grade:['纸片会员','木头会员','提皮会员','金牌会员','非会员'],
  19. point: 300,
  20. };
  21. },
  22. }).mount('.app');
  23. </script>

3. 事件修饰符

  1. <div class="app">
  2. <p onclick="console.log('Hello')">
  3. <!-- 事件修饰符@click.prevent.stop -->
  4. <a href="https://www.php.cn" @click.prevent.stop ="showUrl($event)">show URL:</a>
  5. <!-- {{url}}插值变量 -->
  6. <span class="url">{{url}}</span>
  7. </p>
  8. </div>
  9. <script>
  10. const app = Vue.createApp({
  11. // 实例数据
  12. data(){
  13. return {
  14. url: '',
  15. };
  16. },
  17. // 事件方法
  18. methods: {
  19. showUrl(ev){
  20. console.log(ev);
  21. //注释掉这两行在,在上面用事件修饰符实现
  22. ev.preventDefault();
  23. ev.stopPropagation();
  24. this.url = ev.target.href;
  25. },
  26. }
  27. }).mount('.app');

4. 键盘修饰符

改进之前的留言板

  1. <div class="app">
  2. <!-- <input type="text" @keydown="submit($event)" /> -->
  3. <input type="text" @keydown.enter="submit($event)" />
  4. <ul>
  5. <li v-for="(item, index) of list" :key="index" >{{item}}</li>
  6. </ul>
  7. </div>
  8. <script>
  9. const app = Vue.createApp({
  10. // 实例数据
  11. data(){
  12. return {
  13. // 留言列表
  14. list:[],
  15. };
  16. },
  17. methods: {
  18. submit(ev){
  19. // 加了键盘修饰符,下面有一些就可以注释掉了。
  20. // console.log(ev);
  21. // if(ev.key === 'Enter') {
  22. this.list.unshift(ev.currentTarget.value);
  23. ev.currentTarget.value = null;
  24. // };
  25. },
  26. },
  27. }).mount('.app');
  28. </script>

二、计算属性,侦听器属性实例演示

  1. <style>
  2. table {
  3. width: 20em;
  4. height: 10em;
  5. text-align: center;
  6. border-collapse: collapse;
  7. margin: 1em;
  8. }
  9. table caption {
  10. font-size: 1.2em;
  11. padding: 1em;
  12. margin-bottom: 2em;
  13. border-bottom: 1px solid;
  14. }
  15. tbody tr th {
  16. background: linear-gradient(to left, lightcyan,#fff) ;
  17. border-right: 1px solid;
  18. }
  19. tbody tr:not(:last-of-type) {
  20. border-bottom: 1px solid;
  21. }
  22. </style>
  23. <div class="app">
  24. <table>
  25. <thead>
  26. <caption>商品结算</caption>
  27. </thead>
  28. <tbody>
  29. <tr>
  30. <th>ID</th>
  31. <td>HA110</td>
  32. </tr>
  33. <tr>
  34. <th>品名</th>
  35. <td>伊利纯牛奶</td>
  36. </tr>
  37. <tr>
  38. <th>单价</th>
  39. <td>100</td>
  40. </tr>
  41. <tr>
  42. <th>数量</th>
  43. <td><input type="number" v-model="num" style="width: 5em;" /></td>
  44. </tr>
  45. <tr>
  46. <th>金额</th>
  47. <!-- <td>{{num * price}}</td> -->
  48. <!-- 注释上一行改用访问器属性代替实现,即计算属性-->
  49. <td>{{amount}}</td>
  50. </tr>
  51. </tbody>
  52. </table>
  53. <p style="font-size: 1.2em;">
  54. 实付金额:{{realAmount}},优惠了:
  55. <span style="color: red;">{{difAmount}}</span>
  56. </p>
  57. </div>
  58. <script>
  59. const app = Vue.createApp({
  60. // 实例数据
  61. data(){
  62. return {
  63. // 单价
  64. price: 100,
  65. // 数量
  66. num: 0,
  67. // 折扣
  68. discount: 1,
  69. };
  70. },
  71. // 计算属性(访问器属性)
  72. computed: {
  73. // amount = num * price
  74. amount: {
  75. get(){
  76. return this.num * this.price;
  77. },
  78. set(){
  79. },
  80. },
  81. },
  82. // 侦听器属性
  83. watch: {
  84. // 访问器属性
  85. // 被侦听的属性其实是一个方法,有两个参数,参数1是最新值,参数2是旧值。
  86. amount(current, origin) {
  87. console.log(current, origin);
  88. // 根据金额打折
  89. switch(true){
  90. case current >= 1000 && current < 2000:
  91. this.discount = 0.9;
  92. break;
  93. case current >= 2000 && current < 3000:
  94. this.discount = 0.8;
  95. break;
  96. case current >= 3000 && current < 4000:
  97. this.discount = 0.7;
  98. break;
  99. case current >= 4000 && current < 5000:
  100. this.discount = 0.6;
  101. break;
  102. case current >= 5000:
  103. this.discount = 0.5;
  104. break;
  105. }
  106. // 实付金额 = 原始金额 * 折扣率
  107. this.realAmount = this.amount * this.discount;
  108. // 优惠金额 = 原始金额 - 实付金额
  109. this.difAmount = this.amount - this.realAmount;
  110. },
  111. },
  112. // 实例生命周期,当实例与挂载点绑定成功时,自动执行。
  113. mounted(){
  114. // 初始化
  115. this.num = 1;
  116. },
  117. }).mount('.app');
  118. </script>

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post