Vue小案例（一）

最新推荐文章于 2024-04-11 02:33:16 发布

bit_Sakura

最新推荐文章于 2024-04-11 02:33:16 发布

阅读量500

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/SAKURAjinx/article/details/133550464

版权

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

案例二：书架

案例三：成绩表

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data
        })

    </script>
</body>
</html>

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

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

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

        <div>
            <img :src="list[index]" weight=300 height=300 alt="">
        </div>

效果：

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

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

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

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

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

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-if="index > 0"@click="index--">上一张</button>
        <div>
            <img :src="list[index]" weight=300 height=300 alt="">
        </div>
        <button v-if="index < list.length-1" @click="index++">下一张</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                index:0,
                list:[
                    './0ff7d4d2be9bf8f4839c8196ea2dbba4(1).jpg',
                    './Cache_-2d6dd9d4c0077ac0_edit_658705122363551.jpg',
                    './Cache_3a7a27dc5e08e0ec.jpg',
                    './Cache_4ee7d712c4c9acf8_edit_658719846241153.jpg',
                    './mmexport1692814771342.jpg'
                ]
            }
        })

    </script>
</body>
</html>

案例二：书架

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

使用：

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

<body>
    <div id="app">
        <ul>
            <li v-for="item in bookList">
               <span>{{ item.name }}</span>
               <span>{{ item.author}}</span>
               <button>删除</button>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                bookList:[
                    {id:1,name:'红楼梦',author:'曹雪芹'},
                    {id:2,name:'西游记',author:'吴承恩'},
                    {id:3,name:'水浒传',author:'施耐庵'},
                    {id:4,name:'三国演义',author:'罗贯中'},
                ]
            }
        })
    </script>
</body>

效果：

接下来实现删除功能。

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

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

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

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

<body>
    <div id="app">
        <ul>
            <li v-for="item in bookList" :key="item.id">
               <span>{{ item.name }}</span>
               <span>{{ item.author }}</span>
               <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                bookList:[
                    {id:1,name:'红楼梦',author:'曹雪芹'},
                    {id:2,name:'西游记',author:'吴承恩'},
                    {id:3,name:'水浒传',author:'施耐庵'},
                    {id:4,name:'三国演义',author:'罗贯中'},
                ]
            },methods:{
                del(id){
                    this.bookList = this.bookList.filter(item => item.id !== id)
                }
            }
        })
    </script>
</body>

案例三：成绩表

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" class="score-case">
        <div class="table">
            <table>
                <thead>
                    <td>编号</td>
                    <td>科目</td>
                    <td>成绩</td>
                    <td>操作</td>
                </thead>
                
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>语文</td>
                        <td class="red">46</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>英语</td>
                        <td class="red">80</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>数学</td>
                        <td class="red">70</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                </tbody>

                <tbody>
                    <tr>
                        <td colspan="5">
                            <span class="none">暂无数据</span>
                        </td>
                    </tr>
                </tbody>

                <tfoot>
                    <tr>
                        <td colspan="5">
                            <span>总分:250</span>
                            <span style="margin-left: 50px">平均分:60</span>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div class="form">
            <div class="form-item">
                <div class="label">科目:</div>
                <div class="input">
                    <input
                     type="text"
                     placeholder="请输入科目"
                     />
                </div>
            </div>
            <div class="form-item">
                <div class="label">分数:</div>
                <div class="input">
                    <input
                     type="text"
                     placeholder="请输入分数"
                     />
                </div>
            </div>
            <div class="form-item">
                <div class="label"></div>
                <div class="input">
                   <button class="submit">添加</button>
                </div>
            </div>
        </div>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,subject:'语文',score:20},
                    {id:2,subject:'数学',score:90},
                    {id:3,subject:'英语',score:70}
                ],
                subject:"",
                score:""
            }
        })
    </script>
</body>
</html>

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

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

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

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

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

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

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

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

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

                    add(){
                        if(!this.subject){
                            alert('请输入科目')
                            return
                        }
                        if(typeof this.score != 'number'){
                            alert('请输入正确的成绩')
                            return
                        }
                        
                        this.list.unshift({
                            id: + new Date(), //时间戳
                            subject: this.subject,
                            score: this.score
                        })
                        this.subject = "",
                        this.score = ""
                    }
                }

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

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

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

这里可以加一个判断：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" class="score-case">
        <div class="table">
            <table>
                <thead>
                    <td>编号</td>
                    <td>科目</td>
                    <td>成绩</td>
                    <td>操作</td>
                </thead>
                
                <tbody v-if="list.length > 0" >
                    <tr v-for="(item,index) in list" :key="item.id">
                        <td style="border: 1px solid black"> {{ index+1 }}</td>
                        <td style="border: 1px solid black">{{ item.subject }}</td>
                        <td style="border: 1px solid black">{{ item.score }}</td>
                        <td style="border: 1px solid black"><a href="#" @click="del(item.id)">删除</a></td>
                    </tr>
                </tbody>

                <tbody v-else>
                    <tr>
                        <td style="border: 1px solid black" colspan="5">
                            <span class="none">暂无数据</span>
                        </td>
                    </tr>
                </tbody>

                <tfoot>
                    <tr>
                        <td style="border: 1px solid black" colspan="5">
                            <span>总分:{{ totalScore }}</span>
                            <span style="margin-left: 50px">平均分:{{ aveScore }}</span>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div class="form">
            <div class="form-item">
                <div class="label">科目:</div>
                <div class="input">
                    <input v-model.trim="subject"
                     type="text"
                     placeholder="请输入科目"
                     />
                </div>
            </div>
            <div class="form-item">
                <div class="label">分数:</div>
                <div class="input">
                    <input v-model.number="score"
                     type="text" 
                     placeholder="请输入分数"
                     />
                </div>
            </div>
            <div class="form-item">
                <div class="label"></div>
                <div class="input">
                   <button @click="add" class="submit">添加</button>
                </div>
            </div>
        </div>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,subject:'语文',score:20},
                    {id:2,subject:'数学',score:90},
                    {id:3,subject:'英语',score:70}
                ],
                subject:'',
                score:''
            },
            computed:{
                totalScore(){
                    return this.list.reduce((sum,item)=>sum+item.score,0)                    
                },
                aveScore(){
                    if(this.list.length === 0) return 0
                    return (this.totalScore / this.list.length).toFixed(2);
                }
            },
            methods:{
                    del(id){
                        this.list = this.list.filter(item=>item.id !== id)
                    },
                    add(){
                        if(!this.subject){
                            alert('请输入科目')
                            return
                        }
                        if(typeof this.score !== 'number'){
                            alert('请输入正确的成绩')
                            return
                        }
                        
                        this.list.unshift({
                            id: +new Date(), //时间戳
                            subject: this.subject,
                            score: this.score
                        })
                        this.subject = '',
                        this.score = ''
                    }
                }

        })
    </script>
</body>
</html>

bit_Sakura

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue小案例（一）

那么就需要v-if 来进行条件渲染，注意这里不用v-show，因为v-show只是控制元素的显示隐藏，而不会真正控制元素节点的创建删除。创建图示这么个成绩表，包含三个科目及其编号成绩，显示总分和平均分，并可以进行添加成绩和删除成绩的操作(删除所有数据后显示暂无数据)。删除就是将bookList对应的数组元素删除，那么del方法需要接收参数来确定删除哪一项。现在有5张图片，我想通过点击上一张 / 下一张的按钮来进行图片切换。当上一张到第1张位置时，再点上一张会出错，同样的下一张也是。6、计算总分、平均分。
复制链接

扫一扫