• Vue小案例（一）

    目录

    案例一：点击按钮切换图片

    案例二：书架

    案例三：成绩表

    案例一：点击按钮切换图片

    现在有5张图片，我想通过点击上一张 / 下一张的按钮来进行图片切换。

    使用：v-bind、v-on、v-show

    1、首先创建好Vue代码格式：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <div id="app">
    10.  
    11.     div>
    12.  
    13.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    14.  
    15.     <script>
    16.         const app = new Vue({
    17.             el:'#app',
    18.             data
    19.         })
    20.  
    21.     script>
    22. body>
    23. html>

    有5张图片，需要将其放入数组里，在data中创建数组和下标：

     创建2个按钮，上一张和下一张，以及相应的v-on事件：

    中间还有图片的显示，需要v-bind动态设置img标签属性：

    1.         <div>
    2.             <img :src="list[index]" weight=300 height=300 alt="">
    3.         div>

    效果：

    点击按钮上下翻动图片就完成了，但是还有一个BUG。

    当上一张到第1张位置时，再点上一张会出错，同样的下一张也是。

    解决方式：用v-if 进行条件渲染（或者用v-show)

    1.         <button v-if="index > 0"@click="index--">上一张button>
    2.         <div>
    3.             <img :src="list[index]" weight=300 height=300 alt="">
    4.         div>
    5.         <button v-if="index < list.length-1" @click="index++">下一张button>

     这样到达第一张时“上一张”按钮就不会显示了，同理下一张处也是一样。

    完整代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <div id="app">
    10.         <button v-if="index > 0"@click="index--">上一张button>
    11.         <div>
    12.             <img :src="list[index]" weight=300 height=300 alt="">
    13.         div>
    14.         <button v-if="index < list.length-1" @click="index++">下一张button>
    15.     div>
    16.  
    17.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    18.  
    19.     <script>
    20.         const app = new Vue({
    21.             el:'#app',
    22.             data:{
    23.                 index:0,
    24.                 list:[
    25.                     './0ff7d4d2be9bf8f4839c8196ea2dbba4(1).jpg',
    26.                     './Cache_-2d6dd9d4c0077ac0_edit_658705122363551.jpg',
    27.                     './Cache_3a7a27dc5e08e0ec.jpg',
    28.                     './Cache_4ee7d712c4c9acf8_edit_658719846241153.jpg',
    29.                     './mmexport1692814771342.jpg'
    30.                 ]
    31.             }
    32.         })
    33.  
    34.     script>
    35. body>
    36. html>

    案例二：书架

    现在需要设计这么一个书架，并能够删除其中的书。

    使用：

    首先是用v-for循环渲染数组：

    1. <body>
    2.     <div id="app">
    3.         <ul>
    4.             <li v-for="item in bookList">
    5.                <span>{{ item.name }}span>
    6.                <span>{{ item.author}}span>
    7.                <button>删除button>
    8.             li>
    9.         ul>
    10.     div>
    11.  
    12.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    13.  
    14.     <script>
    15.         const app = new Vue({
    16.             el:'#app',
    17.             data:{
    18.                 bookList:[
    19.                     {id:1,name:'红楼梦',author:'曹雪芹'},
    20.                     {id:2,name:'西游记',author:'吴承恩'},
    21.                     {id:3,name:'水浒传',author:'施耐庵'},
    22.                     {id:4,name:'三国演义',author:'罗贯中'},
    23.                 ]
    24.             }
    25.         })
    26.     script>
    27. body>

     效果：

    接下来实现删除功能。

    首先还是用v-on注册事件，在button上设置点击事件，并且在data下方提供相应的methods：

    删除就是将bookList对应的数组元素删除，那么del方法需要接收参数来确定删除哪一项。

    上面传参传item.id，有id用id，不用数组下标。

    下方方法体中用filter进行过滤：

    1. <body>
    2.     <div id="app">
    3.         <ul>
    4.             <li v-for="item in bookList" :key="item.id">
    5.                <span>{{ item.name }}span>
    6.                <span>{{ item.author }}span>
    7.                <button @click="del(item.id)">删除button>
    8.             li>
    9.         ul>
    10.     div>
    11.  
    12.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    13.  
    14.     <script>
    15.         const app = new Vue({
    16.             el:'#app',
    17.             data:{
    18.                 bookList:[
    19.                     {id:1,name:'红楼梦',author:'曹雪芹'},
    20.                     {id:2,name:'西游记',author:'吴承恩'},
    21.                     {id:3,name:'水浒传',author:'施耐庵'},
    22.                     {id:4,name:'三国演义',author:'罗贯中'},
    23.                 ]
    24.             },methods:{
    25.                 del(id){
    26.                     this.bookList = this.bookList.filter(item => item.id !== id)
    27.                 }
    28.             }
    29.         })
    30.     script>
    31. body>

    案例三：成绩表

    创建图示这么个成绩表，包含三个科目及其编号成绩，显示总分和平均分，并可以进行添加成绩和删除成绩的操作(删除所有数据后显示暂无数据)。

    1、首先，把基础框架搭建好，填入基础数据：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <div id="app" class="score-case">
    10.         <div class="table">
    11.             <table>
    12.                 <thead>
    13.                     <td>编号td>
    14.                     <td>科目td>
    15.                     <td>成绩td>
    16.                     <td>操作td>
    17.                 thead>
    18.                 
    19.                 <tbody>
    20.                     <tr>
    21.                         <td>1td>
    22.                         <td>语文td>
    23.                         <td class="red">46td>
    24.                         <td><a href="#">删除a>td>
    25.                     tr>
    26.                     <tr>
    27.                         <td>2td>
    28.                         <td>英语td>
    29.                         <td class="red">80td>
    30.                         <td><a href="#">删除a>td>
    31.                     tr>
    32.                     <tr>
    33.                         <td>3td>
    34.                         <td>数学td>
    35.                         <td class="red">70td>
    36.                         <td><a href="#">删除a>td>
    37.                     tr>
    38.                 tbody>
    39.  
    40.                 <tbody>
    41.                     <tr>
    42.                         <td colspan="5">
    43.                             <span class="none">暂无数据span>
    44.                         td>
    45.                     tr>
    46.                 tbody>
    47.  
    48.                 <tfoot>
    49.                     <tr>
    50.                         <td colspan="5">
    51.                             <span>总分:250span>
    52.                             <span style="margin-left: 50px">平均分:60span>
    53.                         td>
    54.                     tr>
    55.                 tfoot>
    56.             table>
    57.         div>
    58.         <div class="form">
    59.             <div class="form-item">
    60.                 <div class="label">科目:div>
    61.                 <div class="input">
    62.                     <input
    63.                      type="text"
    64.                      placeholder="请输入科目"
    65.                      />
    66.                 div>
    67.             div>
    68.             <div class="form-item">
    69.                 <div class="label">分数:div>
    70.                 <div class="input">
    71.                     <input
    72.                      type="text"
    73.                      placeholder="请输入分数"
    74.                      />
    75.                 div>
    76.             div>
    77.             <div class="form-item">
    78.                 <div class="label">div>
    79.                 <div class="input">
    80.                    <button class="submit">添加button>
    81.                 div>
    82.             div>
    83.         div>
    84.         
    85.     div>
    86.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    87.     <script>
    88.         const app = new Vue({
    89.             el:'#app',
    90.             data:{
    91.                 list:[
    92.                     {id:1,subject:'语文',score:20},
    93.                     {id:2,subject:'数学',score:90},
    94.                     {id:3,subject:'英语',score:70}
    95.                 ],
    96.                 subject:"",
    97.                 score:""
    98.             }
    99.         })
    100.     script>
    101. body>
    102. html>

    2、table中有2个tbody，分别对应有无数据的情况。那么就需要v-if 来进行条件渲染，注意这里不用v-show，因为v-show只是控制元素的显示隐藏，而不会真正控制元素节点的创建删除。

    只需这样，就可以同时只出现一个tbody了：

    3、渲染列表，用v-for实现，代码会变得简洁很多且容易控制：

    1.                 <tbody v-if="list.length > 0" v-for="(item,index) in list">
    2.                     <tr>
    3.                         <td> {{ index+1 }}td>
    4.                         <td>{{ item.subject }}td>
    5.                         <td class="red">{{ item.score }}td>
    6.                         <td><a href="#">删除a>td>
    7.                     tr>
    8.                 tbody>

    4、实现删除功能。用v-on注册点击事件，简写成@click，创建methods方法实现：

    5、添加功能，需要先处理表单数据的双向绑定，这样才能拿到数据，用v-model：

     v-model.trim可以自动消除输入前后的空白，.number是将输入的字符串转成数字！

    然后是注册点击事件，add方法添加数据，unshift是数据加到最前面：

    严谨起见，还得判断输入的内容是否合规，并且在输入完后使得页面上的数据清除：

    1.                     add(){
    2.                         if(!this.subject){
    3.                             alert('请输入科目')
    4.                             return
    5.                         }
    6.                         if(typeof this.score != 'number'){
    7.                             alert('请输入正确的成绩')
    8.                             return
    9.                         }
    10.                         
    11.                         this.list.unshift({
    12.                             id: + new Date(), //时间戳
    13.                             subject: this.subject,
    14.                             score: this.score
    15.                         })
    16.                         this.subject = "",
    17.                         this.score = ""
    18.                     }
    19.                 }

    6、计算总分、平均分。需要用到computed方法：

    .toFixed(2)是保留两位小数的意思。

    注意：当删除元素删完后，平均分会显示NAN，因为除法除数为0.

    这里可以加一个判断：

     

    完整代码：
     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <div id="app" class="score-case">
    10.         <div class="table">
    11.             <table>
    12.                 <thead>
    13.                     <td>编号td>
    14.                     <td>科目td>
    15.                     <td>成绩td>
    16.                     <td>操作td>
    17.                 thead>
    18.                 
    19.                 <tbody v-if="list.length > 0" >
    20.                     <tr v-for="(item,index) in list" :key="item.id">
    21.                         <td style="border: 1px solid black"> {{ index+1 }}td>
    22.                         <td style="border: 1px solid black">{{ item.subject }}td>
    23.                         <td style="border: 1px solid black">{{ item.score }}td>
    24.                         <td style="border: 1px solid black"><a href="#" @click="del(item.id)">删除a>td>
    25.                     tr>
    26.                 tbody>
    27.  
    28.                 <tbody v-else>
    29.                     <tr>
    30.                         <td style="border: 1px solid black" colspan="5">
    31.                             <span class="none">暂无数据span>
    32.                         td>
    33.                     tr>
    34.                 tbody>
    35.  
    36.                 <tfoot>
    37.                     <tr>
    38.                         <td style="border: 1px solid black" colspan="5">
    39.                             <span>总分:{{ totalScore }}span>
    40.                             <span style="margin-left: 50px">平均分:{{ aveScore }}span>
    41.                         td>
    42.                     tr>
    43.                 tfoot>
    44.             table>
    45.         div>
    46.         <div class="form">
    47.             <div class="form-item">
    48.                 <div class="label">科目:div>
    49.                 <div class="input">
    50.                     <input v-model.trim="subject"
    51.                      type="text"
    52.                      placeholder="请输入科目"
    53.                      />
    54.                 div>
    55.             div>
    56.             <div class="form-item">
    57.                 <div class="label">分数:div>
    58.                 <div class="input">
    59.                     <input v-model.number="score"
    60.                      type="text" 
    61.                      placeholder="请输入分数"
    62.                      />
    63.                 div>
    64.             div>
    65.             <div class="form-item">
    66.                 <div class="label">div>
    67.                 <div class="input">
    68.                    <button @click="add" class="submit">添加button>
    69.                 div>
    70.             div>
    71.         div>
    72.         
    73.     div>
    74.     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
    75.     <script>
    76.         const app = new Vue({
    77.             el:'#app',
    78.             data:{
    79.                 list:[
    80.                     {id:1,subject:'语文',score:20},
    81.                     {id:2,subject:'数学',score:90},
    82.                     {id:3,subject:'英语',score:70}
    83.                 ],
    84.                 subject:'',
    85.                 score:''
    86.             },
    87.             computed:{
    88.                 totalScore(){
    89.                     return this.list.reduce((sum,item)=>sum+item.score,0)                    
    90.                 },
    91.                 aveScore(){
    92.                     if(this.list.length === 0) return 0
    93.                     return (this.totalScore / this.list.length).toFixed(2);
    94.                 }
    95.             },
    96.             methods:{
    97.                     del(id){
    98.                         this.list = this.list.filter(item=>item.id !== id)
    99.                     },
    100.                     add(){
    101.                         if(!this.subject){
    102.                             alert('请输入科目')
    103.                             return
    104.                         }
    105.                         if(typeof this.score !== 'number'){
    106.                             alert('请输入正确的成绩')
    107.                             return
    108.                         }
    109.                         
    110.                         this.list.unshift({
    111.                             id: +new Date(), //时间戳
    112.                             subject: this.subject,
    113.                             score: this.score
    114.                         })
    115.                         this.subject = '',
    116.                         this.score = ''
    117.                     }
    118.                 }
    119.  
    120.         })
    121.     script>
    122. body>
    123. html>

  • 相关阅读:
    GraphQL基础知识与Spring for GraphQL使用教程
    09-06 周二 Python之KNN算法的实现
    2022 云原生编程挑战赛火热报名中！看导师如何拆解 Serverless 赛题？
    『忘了再学』Shell基础 — 23、其他环境变量配置文件
    Git的简介以及基本使用
    9类人事管理场景应用，泛微协助HR释放更多工作量
    黑豹程序员-架构师学习路线图-百科：MVC的演变终点SpringMVC
    使用百度 EasyDL 实现电动车进电梯自动预警
    SpringMVC | SpringMVC中的 “数据绑定”
    Django REST framework(十)路由集routers的使用
  • 原文地址：https://blog.csdn.net/SAKURAjinx/article/details/133550464