Vue 简单的省市联动

白天的我最菜

已于 2023-08-03 10:53:35 修改

阅读量260

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2023-08-03 09:30:38 首次发布

本文链接：https://blog.csdn.net/m0_72735063/article/details/132076097

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>

<head>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        省份：
        <select>
<!--            1selected="selected"加上初始值-->
            <option selected="selected">
                请选择
            </option>
            <option value="广东">
                广东
            </option>
            <option value="湖南">
                湖南
            </option>
            <option value="湖北">
                湖北
            </option>
            <option value="北京">
                北京
            </option>
        </select>
        城市：
        <select>
            <option selected="selected">
                请选择
            </option>
            <option value="长沙">
                长沙
            </option>
            <option value="株洲">
                株洲
            </option>
            <option value="湘潭">
                湘潭
            </option>
        </select>
    </div>
    <script>
        var vm = new Vue({
          el: '#app',
          data: {
            city: '请选择',
            province: '请选择',
            provinces: ['广东', '湖南', '湖北', '北京'],
            cityList: [],
            area: [{
              name: '广东',
              id: 1,
              child: ['广州', '深圳', '东莞']
            },
            {
              name: '湖南',
              id: 2,
              child: ['长沙', '株洲', '湘潭']
            },
            {
              name: '湖北',
              id: 3,
              child: ['武汉']
            },
            {
              name: '北京',
              id: 4,
              child: ['北京']
            }]
          },
          watch: {
            province: function(nval, oval) {
              var self = this;
              var cityList = [];
              if (nval == '请选择') {
                this.citylist = [];
              }
              if (nval != oval) {
                for (var i = 0; i < self.area.length; i++) {
                  if (self.area[i].name == nval) {
                    cityList = self.area[i].child;
                  }
                }
                this.city = "请选择";
                this.cityList = cityList;
              }
            }
          }
        })
    </script>
</body>

</html>

（1）在这段代码中，`self.area[i].child`和`area[i].child`的区别在于它们所指向的对象。

- `self.area[i].child`表示`self`对象的`area`属性的第`i`个元素的`child`属性。`self`是指向当前函数的上下文对象，可能是一个Vue实例或其他对象。这个属性应该是之前定义的一个数组或对象。
- `area[i].child`表示`area`数组的第`i`个元素的`child`属性。`area`是一个在当前作用域内定义的变量，可能是一个数组或对象。

如果不加`self.`，代码将尝试在当前作用域内查找`area`变量。如果没有找到`area`变量，则会抛出一个错误，导致代码无法正常执行。

（2）因此，`self.area[i].child`表示从`self`对象的`area`属性中获取第`i`个元素的`child`属性。而`area[i].child`表示从当前作用域内的`area`变量中获取第`i`个元素的`child`属性。

而area[i].child表示全局作用域下的变量area数组中的child属性。在该代码中，由于area是定义在Vue实例之外的全局变量，因此在watch属性中无法直接访问到。

不加self，即直接使用area[i].child会导致找不到area变量的报错，因为area只在Vue实例中可见。因此，在代码中使用self.area[i].child来获得area数组的child属性，确保可以正确访问到该值。

this的引用

（3）在给定的代码片段中，self.area[i].child和area[i].child指的是同一个属性，但是它们的使用上有一些区别。

self.area[i].child中的self是一个变量，它在代码的开头通过var self = this;进行了定义。这里的self是为了在内部函数中访问外部函数的this上下文而创建的一个引用。通过将this赋值给self，可以在内部函数中使用self来访问Vue实例的属性和方法。

而area[i].child则是直接访问当前作用域下的area数组的i索引对应的元素的child属性。

在给定的代码中，self.area[i].child和area[i].child的作用是相同的，都是获取area数组中特定索引位置的元素的child属性。

如果不加self，直接使用area[i].child，则在内部函数中无法访问到area数组，因为作用域的限制。因此，为了在内部函数中能够访问到area数组，需要使用self来引用外部的this上下文。

总结起来，self.area[i].child和area[i].child的作用是相同的，都是获取area数组中特定索引位置的元素的child属性。使用self.area[i].child可以在内部函数中访问到Vue实例的属性。