Hello, 我是杨小宝!商城项目就不更新了,因为我突然换项目了!!!是不是很尴尬,不过这个项目是一个订飞机票的项目,逻辑思维也是很强的!持续更新该项目的知识点。能触及到的都是关于vue2的知识!今天给大家写一个vue中的 ‘$(this)’

说起¥this,(不知道为什么不让打 美元符号我就用¥ 表示了)一想就是jq嘛,假如说在jq中我们很多li标签然后里面都有内容我们获取每一个li标签的里面的内容是不是 ¥ (this).html() 或者 $(this).text() 那在Vue中怎么获取呢???我这边做了 一个双数据的循环的demo,分享一下!

最后的结构图:
这里写图片描述

上面的选项先不说!都是请求数据的,说一下下面的结构把

<div class="city_title">
    <ol>
        <li :class="{active:city_titleActive == index}" v-for='(city_title,index) in city_titles' @click='hotCity(city_title,index)'>{{city_title}}</li>
        <li></li>
        <li @click='closecity'>关闭</li>
    </ol>
    <div class="clear"></div>
</div>
<div class="city_content">
    <ul v-for='item in city_contents'>
        <li v-for='(list,index) in item.city_content' @click='citylis(list)'>{{list.city}}</li>
    </ul>
</div>

上面的ol里面内容就是 选项! 下面ul的内容才是我们的城市列表
这里我不是 很多li标签 而是很多ul套li循环ul出来的列表

数据:

city_contents:[
    {
        city_content:[
            {city:'北京'},
            {city:'西安'},
            {city:'东京'},
            {city:'伦敦'}
        ]
    },
    {
        city_content:[
            {city:'上海'},
            {city:'重庆'},
            {city:'曼谷'},
            {city:'巴黎'}
        ]
    },
    {
        city_content:[
            {city:'广州'},
            {city:'杭州'},
            {city:'新加波'}
        ]
    },
    {
        city_content:[
            {city:'成都'},
            {city:'香港'},
            {city:'吉隆坡'}
        ]
    },
    {
        city_content:[
            {city:'深圳'},
            {city:'台北'},
            {city:'纽约'}
        ]
    },
    {
        city_content:[
            {city:'昆明'},
            {city:'首尔'},
            {city:'悉尼'}
        ]
    }
],

每一列都是一个ul每一行都是对应的li
首先通过循环ul

<ul v-for='item in city_contents'>

在循环li

<li v-for='(list,index) in item.city_content' @click='citylis(list)'>{{list.city}}</li>

这里 一定要注意我们的ul循环的时候值已经赋给了item,所有这里遍历的是 item.city_content

然后给每一个li添加点击事件,传入的值是 list 这里的list就是 $(this)

citylis(list){
    console.log(list.city);
}

这就是我们vue中的$(this)
全代码就不给大家发了,很简单的一个小demo,项目前期,都是简单到复杂,我打算等到数据交互接口那块多写一下demo。以及讲解一下项目的逻辑等等。。。项目结束后我会发一套完整的博客。思维图+代码(仅提供模仿)+接口实现调用。

好了!大家好,我是杨小宝!感谢您的阅读!

Logo

前往低代码交流专区

更多推荐