vue2中的“$(this)” === JQ中$(this)--飞机票项目

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。以及讲解一下项目的逻辑等等。。。项目结束后我会发一套完整的博客。思维图+代码（仅提供模仿）+接口实现调用。

好了！大家好，我是杨小宝！感谢您的阅读！

vue2中的“$(this)” === JQ中$(this)--飞机票项目相关推荐

Vue2.0 --- vue-cli脚手架中全局引入JQ
第一步:安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下 ...
vue2中vant实现网易云音乐案例-附带所有源码
vue2中vant实现网易云音乐案例-附带所有源码前言学习笔记以及源码下载gitee: https://gitee.com/xingyueqianduan/vantmsicdemo 下载下来的内容 ...
vue2中使用axios，以及axios拦截器的配置
目录一.vue2项目中如何实现异步请求 1.axios:是一个基于Promise的网络请求库.既可以在node.js(服务器端)使用,也可以在浏览器端使用 2.vue中的使用方法 (2)引用方法 ...
vue2 通过 axios 访问koa2,从mysql 拿到数据更新vue2中的内容
vue2 通过 axios 访问koa2,从mysql 拿到数据更新vue2中的内容 axios 类似ajax 注意红色字体 node --inspect index.js (启用debug模式) ...
vue2中使用Leaflet实现单个或多个marker图标
vue2中使用Leaflet实现单个或多个marker图标初始化一个vue项目在 vue 中安装 Leaflet 在main.js中引入leaflet 加载一个简单的地图框架添加一个或多个Mar ...
vue2中，使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件
vue2中,使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件 Vite 官方中文文档--https://cn.vitejs.dev/ vite-plugin-vue2包 ...
【Unity3D】材质 Material ( 材质简介 | 创建材质 | 设置材质属性 | 对 3D 物体应用材质 | 资源拖动到 Inspector 检查器中的 Material 属性中 )
文章目录一.材质 Material 简介二.创建材质三.设置材质属性四.对 3D 物体应用材质五.资源拖动到 Inspector 检查器中的 Material 属性中一.材质 Materi ...
在vue2中使用vue3的核心功能（渐进式升级vue版本）
一.前言学了真香的vue3语法,但目前的vue2项目中短期内不会再升级了,空有屠龙之术无法施展?来试试以下的解决方案,让你在vue2项目中也能用上vue3的核心语法-组合式API. 二.选项式API ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...

vue2中的“$(this)” === JQ中$(this)--飞机票项目

vue2中的“$(this)” === JQ中$(this)--飞机票项目相关推荐

最新文章

热门文章