博主信息
博文 42
粉丝 0
评论 0
访问量 22919
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
0804条件渲染与列表渲染
小言
原创
561人浏览过

列表渲染

在使用过程中,我们通常使用v-for指令来进行一组列表数组的渲染,在v-for中,我们拥有对父级作用域的完全访问权限。

  1. <ul>
  2. <li v-for="(city,index) of cities" :key="index">{{index}}:{{city}}</li>
  3. </ul>

条件渲染

v-if指令通常用于条件渲染,用true和false来表达。

  1. <div class="app">
  2. <p v-if="flag">
  3. {{message}}
  4. </p>
  5. <button @click="flag=!flag" v-text="flag ? '隐藏' : '显示'"></button>
  6. <!-- if-else, if else if else -->
  7. <p v-if="point >= 1000 && point < 2000">{{grade[0]}}</p>
  8. <p v-else-if="point >= 2000 && point < 3000">{{grade[1]}}</p>
  9. <p v-else-if="point >= 3000 && point < 4000">{{grade[2]}}</p>
  10. <p v-if="point >= 4000">{{grade[3]}}</p>
  11. <!-- <p v-else>{{grade[4]}}</p> -->
  12. </div>
  13. Vue.createApp({
  14. data() {
  15. return {
  16. message: '今天是前端最后一节课',
  17. flag:true,
  18. grade:['纸片会员', '木头会员', '铁皮会员', '金牌会员', '非会员'],
  19. //积分
  20. point:2500,
  21. };
  22. },
  23. }).mount('.app');

键盘修饰符

  1. <div class="app">
  2. <input type="text" @keydown.enter="submit($event)">
  3. <ul>
  4. <li v-for="(item,index) of list" :key="index">{{item}}</li>
  5. </ul>
  6. </div>
  7. <script>
  8. Vue.createApp({
  9. data(){
  10. return{
  11. list: [],
  12. };
  13. },
  14. methods:{
  15. submit(ev){
  16. if (ev.key === 'Enter'){
  17. this.list.unshift(ev.currentTarget.value);
  18. ev.currentTarget.value = null;
  19. } */
  20. this.list.unshift(ev.currentTarget.value);
  21. ev.currentTarget.value = null;
  22. },
  23. },
  24. }).mount('.app');
  25. </script>

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学