Vue.数组变异方法的应用-Vue-前端日记簿

首页 Vue 正文

Vue.数组变异方法的应用

2023-07-07 143

1. 数组的变异方法在vue中的应用

1、变异方法：会影响数组的原始数据的变化。

2、非变异方法：不会影响原始的数组数据，而是形成一个新的数组。

push：

往数组最后面添加一个元素，成功返回当前数组的长度

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" name="" id="" v-model="fname"> <button @click="add">添加</button>
        </p>
        <ul>
            <li v-for="(item,index) in list" v-bind:key="index">{{item}}</li>
        </ul>
    </div>
  </div>
  <script src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      Vue数组操作
      1、变异方法：会影响数组的原始数据的变化。
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fname: '',
        list: ['apple','orange','banana']
      },
      methods: {
        add: function(){
          //向数组中添加新元素
          this.list.push(this.fname);
          //添加后，将文本框中的内容置空
          this.fname = '';
        }
      }
    });
  </script>
</body>
</html>

预览;

pop：

删除数组的最后一个元素，成功返回删除元素的值

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" name="" id="" v-model="fname"> 
            <button @click="add">添加</button>
            <button @click="del">删除</button>
        </p>
        <ul>
            <li v-for="(item,index) in list" v-bind:key="index">{{item}}</li>
        </ul>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                fname:'',
                list:['apple','orange','banana']
            },
            methods:{
                add(){
                    this.list.push(this.fname);
                    this.fname = '';
                },
                del(){
                    this.list.pop();
                }
            }
        })
    </script>
</body>
</html>

预览;

shift：

删除数组的第一个元素，成功返回删除元素的值

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>
        <input type="text" v-model='fname'>
        <button @click='del'>前面删除</button>
      </span>
    </div>
    <ul>
      <li :key='index' v-for='(item,index) in list'>{{item}}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script type="text/javascript">
    /*
      Vue数组操作
      1、变异方法：会影响数组的原始数据的变化。
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fname: '',
        list: ['apple','orange','banana']
      },
      methods: {
        del: function(){
          this.list.shift();
        }
      }
    });
  </script>
</body>
</html>

预览：

splice:

有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item, index in list">
                <span>{{ item }}</span>
                <span @click="del(index)">删除</span>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script>
        /*
          Vue数组操作
          1、变异方法：会影响数组的原始数据的变化。
        */
        const vm = new Vue({
            el: "#app",
            data: {
                list: ["aaa", "bbb", "ccc", "ddd"]
            },
            methods: {
                del(idx) {
                    this.list.splice(idx, 1);
                }
            }
        })
    </script>
</body>
</html>

预览：

sort：

sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组

 <div id="app">
        <h1>数组中的方法中vue中的应用</h1>
        <div>
            <input type="text" name="" id="" v-model="fname">
            <button @click="add">添加</button>
            <button @click="mysort">排序</button>
            <br>
            <ul>
                <li v-for="(item,index) in list">{{item}}</li>
            </ul>
        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    fname:'',
                    list:['apple','orange','banana']
                }
            },
            methods:{
                add(){
                    // 1.向数组中添加新元素
                    this.list.push(this.fname);
                    // 2.添加后，将文本框中的内容置空
                    this.fname = '';
                },
                mysort(){
                    this.list.sort();
                }
            }
        })
    </script>

预览：

1.6 reverse

reverse() 将数组倒序，成功返回倒序后的数组

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>
        <input type="text" v-model='fname'>
        <button @click='reverse'>颠倒数组</button>
      </span>
    </div>
    <ul>
      <li :key='index' v-for='(item,index) in list'>{{item}}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script type="text/javascript">
    /*
      Vue数组操作
      1、变异方法：会影响数组的原始数据的变化。
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fname: '',
        list: ['apple','orange','banana']
      },
      methods: {
        reverse: function(){
          this.list.reverse();
        }
      }
    });
  </script>
</body>
</html>

预览：

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=12

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。