介绍 vue的优点 美元(& # 39;.tab .title& # 39;); (& # 39; .item& # 39;)
,.removeClass(& # 39;目前# 39;).eq(索引).addClass(& # 39;目前# 39;);,//,为索引位置的标题添加电流
美元(& # 39;.tab .content& # 39;); (& # 39; .item& # 39;)
,hide () .eq(索引),告诉();,//,显示指数位置的内容 & lt; div 类=癶d"比;
,& lt; ul 类=癱learfix"比;
& lt;才能li v=?项目,,指数),of list",:类=皗活跃:选择==指数}“,@mouseenter=案谋?索引),在{{item.title}} & lt;/li>
,& lt;/ul>
& lt;/div>
& lt; div v=?项目,,指数),of list",:类=皗活跃:选择==指数,单品:真正}“,v-html=癷tem.content"祝辞& lt;/div> var app =, Vue ({new
,el: & # 39; #应用# 39;
,数据:{
,,选择:0,,//当前位置
列表:,才能
,,{
,,,标题:,& # 39;11111 & # 39;
,,,内容:,& # 39;11111内容# 39;
,,},
,,{
,,,标题:,& # 39;22222 & # 39;
,,,内容:,& # 39;222222内容# 39;
,,},
,,{
,,,标题:,& # 39;33333 & # 39;
,,,内容:,“& lt; div>
,,,,,,,& lt; span 祝辞hello world
,,,,,,,& lt; p> & lt; input 类型=皌ext", v模型=癿essage"祝辞& lt;/p>
,,,,,,,& lt; p>{{消息}}& lt;/p>
,,,,,,& lt;/div>
,,}
,,)
},
,方法:{
改变才能(索引),{
,,this.selected =,指数;
,,}
,}
}) & lt; div 类=& # 39;bd # 39;, v-html=傲斜?选择).content"祝辞& lt;/div> //, tab0
Vue.component (& # 39; item0& # 39;, {
,template : & # 39; & lt; div> 1111111 content
& # 39;
});//tab1
Vue.component (& # 39; item1& # 39;, {
,template : & # 39; & lt; div> 222222 content小编给大家分享一下怎么使用vue实现选项卡切换操作,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
在使用jQuery类库实现选项卡功能时,是获取鼠标在mousenter或单击时的索引值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉:
那么在使用vue实现选项卡功能时,就不是像jQuery这种直接操作DOM了。我这里总结了下实现选项卡功能的3个思路,仅供参考。
<强> 1。切换内容或者直接切换内容
这种思路下,我们首先把结构搭建起来,然后用一个变量选择表示标签当前展示的位置,给李标签添加mouseenter或单击事件,将当前的指数传递进去:
html代码:
js代码:
绑定的<代码>改变(索引)事件,每次都将指数给了<代码>选择>
上面的代码里,我们是通过切换div的显示与隐藏来进行执行的.tab中里的内容如果只有纯html内容,我们可以直接把<代码>列表(选择).content 展示到。bd中:
每次选择变换时,bd的内容都会发生变化。
<强> 2。使用currentView
在上面的实现方式中,第3个标签里有个输入框与p标签双向绑定,但是没有效果,因为vue是把列表中的内容作为html元素填充到页面中的,消息并没有作为vue的属性绑定给输入。那么使用组建和currentView就能弥补这个缺陷。
无论使用全局注册还是局部注册的组件,思路都是一样的,我们暂时使用全局注册的组件来实现。
每个组件里展示的是一个标签里的内容,先注册3个组件:
