vant title-active-カラーとtitle-inctive-カラーが有効でない問題を解決します。

1、vueプロジェクトを作成する
2、vantコンポーネントを使う
npm install vant--S
全体参照は、main.jsで導入されます。

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

もしあなたが導入したら、ページのスタイルとコンポーネントがマウントされています。しかし、consolieコンソールはエラーを報告します。xxxxコンポーネントにはregisterがないと言います。この時はあなたのvantプラグインのバージョンに問題があるかもしれません。最新のvantを再ダウンロードすればいいです。今は2.6.0版です。
はい、これから続けます。
コンボボックスを使用する必要があるところに、コンボボックスのコンポーネントを使用します。

 <van-dropdown-menu>
 <van-dropdown-item
  v-model="value"
 :options="developList"
 />
</van-dropdown-menu>
 
data () {
 return {
 value: ''
 developList: [
  {
  value: '1',
  text: '     '
  },
 {
  value: '2',
  text: '     '
  },
 ]
 }
}

もしそうならば、下枠はデフォルトで最初の文字「wishing 1番目」を表示します。そして、下枠をクリックして2番目を選択すると「私は2番目」に変更されます。
デフォルトの選択をしたくないなら、最初にこのような表示を選択してくださいと表示されます。vantのapi文書を見に行きます。titleの文字があります。このtitleはプルダウン枠の表示文字です。最初は多くの人がこのプルダウン枠のtitleが表示されてからプルダウン枠のitemをクリックすると自動的に結合されます。でも、実は間違いです。以下はいい例です。

<van-dropdown-menu>
 <van-dropdown-item
 title="   "
 v-model="value"
 :disabled="disabled"
 :options="developList"
 />
</van-dropdown-menu>
 
data () {
 return {
 value: ''
 developList: [
  {
  value: '1',
  text: '     '
  },
 {
  value: '2',
  text: '     '
  },
 ]
 }
}

選択した自然は一度も変わったことがないことを発見します。第一か第二かを選択しても、titleはバインディングではないかと思います。次は以下の操作があります。

<van-dropdown-menu>
 <van-dropdown-item
 :title="title"
 v-model="value"
 :disabled="disabled"
 :options="developList"
 />
</van-dropdown-menu>
 
data () {
 return {
 value: ''
 title:''   ,
 developList: [
  {
  value: '1',
  text: '     '
  },
 {
  value: '2',
  text: '     '
  },
 ]
 }
}

加えて、まだ変更されていませんが、バインディングの値は変更されていませんでしたか？そうです。あなたの値がこのtitleを定義しているので、このtitleはドロップダウン枠の選択の表示です。あなたがtitleを持っていない時にvantがあなたの選択したtextテキストをtitleにマッピングしました。
自分でtitleを使ってバインディングしたら、修正するたびにtitleを修正して、vant apiを見ると、changeイベントがあることが分かります。次は操作できます。

<van-dropdown-menu>
 <van-dropdown-item
 :title="title"
 v-model="value"
 :options="developList"
 @change="changeDevelop"
 />
</van-dropdown-menu>
 
data () {
 return {
 value: ''
 title:''   ,
 developList: [
  {
  value: '1',
  text: '     '
  },
 {
  value: '2',
  text: '     '
  },
 ]
 }
},
 
methods: {
 changeDevelop (i) {
 this.title = this.developList[i-1].text
 },
}

これで大丈夫です。
補足知識：簡単粗暴にvantコンポーネントnav-barのtitleを修正します。
最近、vantコンポーネントのnav-barのタイトルの色は変えなければならないと聞きましたが、できません。インターネットで探してみましたが、どれも複雑です。
そして、深度セレクタにより、nav-barのタイトルのフォント色を変更することができることを発見しました。
コード:

<template>
 <view>
 <demo-block title="    " class="reset">
 <van-nav-bar title="  " left-text="  " right-text="  " left-arrow @clickLeft="onClickLeft" @clickRight="onClickRight" id="reset"/>
 </demo-block>

 <demo-block title="    ">
 <van-nav-bar title="  " left-text="  " left-arrow>
 <van-icon name="search" slot="right" custom-class="icon" />
 </van-nav-bar>
 </demo-block>

 </view>
</template>

<script>
 import Page from '../../common/page';

 export default {
 data() {
 return {

 }
 },
 onLoad() {},
 methods: {
 onClickLeft() {
 console.log("11");//TODO    
 uni.showToast({
  title: '    ',
  icon: 'none'
 });
 },

 onClickRight() {
 uni.showToast({
  title: '    ',
  icon: 'none'
 });
 }
 }
 }
</script>

<style>
 .icon {
 color: #1989fa;
 } 
 #reset /deep/ .van-ellipsis{
 color: red !important;
 }
</style>

効果:

コンポーネントにIDを定義して、この深さセレクタでtitleのラベルのクラス名を取得して、色を修正すればいいです。
以上のこの解決はvant title-active-カラーとtitle-inctive-カラーの有効ではない問題は小編が皆さんに共有した内容の全部です。参考にしてもらいたいです。どうぞよろしくお願いします。