vue2中的“$(this)” === JQ中$(this)--飞机票项目
Hello, 我是杨小宝!商城项目就不更新了,因为我突然换项目了!!!是不是很尴尬,不过这个项目是一个订飞机票的项目,逻辑思维也是很强的!持续更新该项目的知识点。能触及到的都是关于vue2的知识!今天给大家写一个vue中的 ‘$(this)’说起¥this,(不知道为什么不让打 美元符号我就用¥ 表示了)一想就是jq嘛,假如说在jq中我们很多li标签然后里面都有内容我们获取每一个li标签的里面的内
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。以及讲解一下项目的逻辑等等。。。项目结束后我会发一套完整的博客。思维图+代码(仅提供模仿)+接口实现调用。
好了!大家好,我是杨小宝!感谢您的阅读!
更多推荐
所有评论(0)