vue项目中使用vant下拉框标题值不变怎么解决

vue项目中使用vant下拉框标题值不变怎么解决?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

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 　　}, 　　}

看完上述内容,你们掌握vue项目中使用vant下拉框标题值不变怎么解决的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!

vue项目中使用vant下拉框标题值不变怎么解决