vue综合案例一--图书管理

最新推荐文章于 2023-03-25 23:15:46 发布

Akii7

最新推荐文章于 2023-03-25 23:15:46 发布

阅读量518

点赞数

本文链接：https://blog.csdn.net/cheng_09/article/details/110351577

版权

本文是关于Vue.js的综合案例，介绍了如何实现图书管理。内容包括：补充了数组相关API的使用，如变异方法（push、pop等）和非变异方法（filter、concat等），并讲解了在Vue中修改响应式数据的方法Vue.set和vm.$set。同时，讨论了在图书管理场景中应用的Vue特性，如过滤器、自定义指令、计算属性、侦听器和生命周期。

摘要由CSDN通过智能技术生成

vue综合案例1-图书管理

补充知识（数组相关API）

变异方法（修改原有数据）

push（）
pop（）
shift（）
unshift（）
splice（）
sort（）
reverse（）

<!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>
            <span>
                <input type="text" v-model='fname'>
                <button @click='add'>添加</button>
                <button @click='del'>删除</button>
            </span>
        </div>
        <ul>
            <li :key='index' v-for='(item,index) in list'>{
    {item}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        // vue数组操作
        var vm = new Vue({
      
            el: '#app',
            data: {
      
                fname: '',
                list: ['apple', 'orange', 'banana']
            },
            methods: {
      
                add: function () {
      
                    this.list.push(this.fname);
                    this.fname = '';
                },
                del: function () {
      
                    this.list.pop();
                }
            }
        });
    </script>

</body>

</html>

替换数组（生成新的数组）

filter（）
concat（）
slice（）

<!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>
            <span>
                <input type="text" v-model='fname'>
                <button @click='change'>替换</button>
            </span>
        </div>
        <ul>
            <li :key='index' v-for='(item,index) in list'>{
    {item}}

最低0.47元/天解锁文章

Akii7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue综合案例一--图书管理

vue综合案例1-图书管理补充知识（数组相关API）变异方法（修改原有数据）push（）pop（）shift（）unshift（）splice（）sort（）reverse（）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
复制链接

扫一扫