Vue项目中title-inactive-colorvant和title-active-color不生效的解决方法

这期内容当中小编将会给大家带来有关Vue项目中title-inactive-colorvant和title-active-color不生效的解决方法,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

1,创建Vue项目

2,使用vant组件

npm安装vant——S

全局引用时在主。js引入

从& # 39;进口Vant vant& # 39;;
　　进口& # 39;vant/lib/index.css& # 39;;
　　Vue.use (Vant); 

假如你引入之后发现页面的样式和组件都挂载了,但是控制台控制台会报的错,说xxxx组件没有登记,这个时候很有可能是你的Vant插件版本有问题,重新下载一个最新的Vant就可以了,现在是2.6.0版本

好,接下来继续

在需要使用下拉框的地方使用下拉框组件

 & lt; van-dropdown-menu>
　　& lt; van-dropdown-item
　　v模型=皏alue"
　　:选项=癲evelopList"/比;
　　& lt;/van-dropdown-menu>
　　
　　数据(){
　　返回{
　　价值:& # 39;& # 39;
　　developList:(
　　{
　　价值:& # 39;1 & # 39;
　　文字:& # 39;我是第一个& # 39;
　　},
　　{
　　价值:& # 39;2 & # 39;
　　文字:& # 39;我是第二个& # 39;
　　},
　　]
　　}
　　}

假如是这样的话那么下拉框就会默认显示第一个字眼”祝第一个”,然后你在点击下拉框选择第二个时也会改变成“我是第二个“

如果你不想有默认选中,并且一开始就显示请选择这样的提示字眼,那么我们可以去看看vant的api文档,发现有一个标题的字眼,这个标题就是下拉框的显示文字,一开始很多人以为这个下拉框的标题只是用来显示然后点击下拉框的项之后会自动绑定过的,但其实是错误的,以下就是一个很好的例子

& lt; van-dropdown-menu> 　　& lt; van-dropdown-item 　　title=扒胙≡瘛? 　　v模型=皏alue" 　　:禁用=癲isabled" 　　:选项=癲evelopList"/比; 　　& lt;/van-dropdown-menu> 　　 　　数据(){ 　　返回{ 　　价值:& # 39;& # 39; 　　developList:( 　　{ 　　价值:& # 39;1 & # 39; 　　文字:& # 39;我是第一个& # 39; 　　}, 　　{ 　　价值:& # 39;2 & # 39; 　　文字:& # 39;我是第二个& # 39; 　　}, 　　] 　　} 　　}

你会发现请选择的自然从来没变过,无论你选择了第一个还是第二个,那么你就会想标题是不是绑定,接下来就有以下操作

& lt; van-dropdown-menu> 　　& lt; van-dropdown-item 　　:title=皌itle" 　　v模型=皏alue" 　　:禁用=癲isabled" 　　:选项=癲evelopList"/比; 　　& lt;/van-dropdown-menu> 　　 　　数据(){ 　　返回{ 　　价值:& # 39;& # 39; 　　标题:& # 39;& # 39;请选择, 　　developList:( 　　{ 　　价值:& # 39;1 & # 39; 　　文字:& # 39;我是第一个& # 39; 　　}, 　　{ 　　价值:& # 39;2 & # 39; 　　文字:& # 39;我是第二个& # 39; 　　}, 　　] 　　} 　　}

加下来发现还是没有改动啊,那是不是绑定的值没有发生改变了,好像是的,因为你值定义了这个标题,这个标题就是下拉框选择的显示,只是你没有标题的时候vant把你选择文的文本字映射到标题上去了,

一旦你自己使用标题进行绑定,那么每次修改时就要修改标题,查看vant api可以发现有改变事件,接下来就可以操作了

& lt; van-dropdown-menu> 　　& lt; van-dropdown-item 　　:title=皌itle" 　　v模型=皏alue" 　　:选项=癲evelopList" 　　@change=癱hangeDevelop"/比; 　　& lt;/van-dropdown-menu> 　　 　　数据(){ 　　返回{ 　　价值:& # 39;& # 39; 　　标题:& # 39;& # 39;请选择, 　　developList:( 　　{ 　　价值:& # 39;1 & # 39; 　　文字:& # 39;我是第一个& # 39; 　　}, 　　{ 　　价值:& # 39;2 & # 39; 　　文字:& # 39;我是第二个& # 39; 　　}, 　　] 　　} 　　}, 　　 　　方法:{ 　　changeDevelop (i) { 　　这一点。title=this.developList张。text 　　}, 　　}

这就没问题啦!

<强>简单粗暴修改vant组件导航栏的标题(标题的字体颜色)

最近我有人问我关于vant组件的导航栏的标题颜色需要改但是不会,我去网上找了一下,发现都很复杂

然后我发现通过深度选择器可以修改导航栏的标题的字体颜色

代码:

& lt; template> 　　& lt; view> 　　& lt; demo-block title=盎∮梅ā?类=皉eset"比; 　　& lt; van-nav-bar title=氨晏狻?左文本=胺祷亍皉ight-text=鞍磁?左箭头@clickLeft=皁nClickLeft"@clickRight=皁nClickRight"id=皉eset"/比; 　　& lt;/demo-block> 　　 　　& lt; demo-block title=案呒队梅ā氨? 　　& lt; van-nav-bar title=氨晏狻?左文本=胺祷亍發eft-arrow> 　　& lt; van-icon name=皊earch"槽=皉ight"自定义类=癷con"/比; 　　& lt;/van-nav-bar> 　　& lt;/demo-block> 　　 　　& lt;/view> 　　& lt;/template> 　　 　　& lt; script> 　　从& # 39;导入页面. ./. ./共同/页面# 39;; 　　 　　出口默认{ 　　数据(){ 　　返回{ 　　 　　} 　　}, 　　alt=" Vue项目中title-inactive-colorvant和title-active-color不生效的解决方法">

Vue项目中title-inactive-colorvant和title-active-color不生效的解决方法