Vueのselect組み込みコンポーネントを使用する手順の詳細な説明

今回は、Vue の select 組み込みコンポーネントを使用する手順について詳しく説明します。Vue の select 組み込みコンポーネントを使用する際の注意点は何ですか? 以下は実際のケースです。

1. 統合されたサードパーティ jQuery プラグイン (select2)

nbsp;html> 
 
 
  <meta> 
  <title></title> 
  <link> 
  <style> 
    html, body { 
 font: 13px/18px sans-serif; 
} 
select { 
 min-width: 300px; 
} 
  </style> 
 
 
<p> 
  </p><p>选中的: {{ selected }}</p> 
  <select2></select2> 
 
  <script></script> 
  <script></script> 
  <script></script>   
<script> 
  Vue.component(&#39;select2&#39;, { 
    props: [&#39;options&#39;, &#39;value&#39;], 
    template: &#39;<select><slot>&#39;, 
    mounted: function () { 
      var vm = this;// init select2 
      $(this.$el).select2({ data: this.options }).val(this.value).trigger(&#39;change&#39;).on(&#39;change&#39;, function () { 
        // emit event on change. 
        vm.$emit(&#39;input&#39;, this.value) 
      }) 
    }, 
    watch: { 
      value: function (value) { 
          // update value 
        $(this.$el).val(value).trigger(&#39;change&#39;) 
      }, 
      options: function (options) { 
         // update options 
        $(this.$el).empty().select2({ data: options }) 
      } 
    }, 
    destroyed: function () { 
      $(this.$el).off().select2(&#39;destroy&#39;) 
    } 
  }) 
var vm = new Vue({ 
  el: &#39;#el&#39;, 
  data: { 
    selected: 2, 
    options: [ 
      { id: 0, text: &#39;苹果&#39; }, 
      { id: 1, text: &#39;香蕉&#39; }, 
      { id: 2, text: &#39;香梨&#39; }, 
      { id: 3, text: &#39;榴莲&#39; }, 
      { id: 4, text: &#39;西瓜&#39; } 
    ] 
  } 
}) 
</script> 
 

2. シンプルな select

nbsp;html>  
  
  
<meta>  
  <style>  
  *{ 
    padding: 0; 
    margin: 0; 
  } 
  ul,li { 
    list-style: none; 
  } 
  li { 
    line-height: 2em; 
  } 
  li:hover { 
    background-color: #f9f9f9; 
    border-radius:5px; 
    cursor: pointer; 
  } 
  input{ 
    cursor:pointer; 
    outline:none; 
  } 
  #app { 
    margin-top: 20px; 
  } 
  #app h2 { 
    text-align: center; 
  } 
  .wrap { 
    background-color: rgba(56, 170, 214, 0.45); 
    border-radius: 20px; 
    width: 300px; 
    margin: 40px; 
    padding: 20px; 
  } 
  input[type="button"] { 
    font-size:14px; 
    margin-left:2px; 
    padding:2px 5px; 
    background-color:rgb(228, 33, 33); 
    color:white; 
    border:1px solid rgb(228, 33, 33); 
    border-radius:5px; 
  } 
  .clearFix { 
    padding-left: 
  } 
  input.keyWord { 
    border: 1px solid #777777; 
    border-radius: 10px; 
    height: 30px; 
    width: 80%; 
    padding-left: 10px; 
    font-size: 16px; 
  } 
  ul.list { 
    margin: 20px 0; 
  } 
  ul.list li { 
    padding: 10px 0 0 10px; 
  } 
</style>  
  
   
 <p> 
    </p><p> 
      </p><h2 id="自定义下拉框">自定义下拉框</h2> 
      <custom-select></custom-select> 
     
    <p> 
      </p><h2 id="自定义下拉框">自定义下拉框2</h2> 
      <custom-select></custom-select> 
     
   
  <p> 
    <custom-select></custom-select> 
  </p> 
    <script></script>  
 <script> 
    Vue.component("custom-select",{ 
      data(){ 
        return { 
          selectShow:false, 
          val:"" 
        } 
      }, 
      props:["btnValue","list"], 
      template:`<section class="wrap"> 
            <p class="searchIpt clearFix"> 
              <p class="clearFix"> 
                <input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" /> 
                <input type="button" :value="btnValue" /> 
                <span> 
               
              <custom-list  
                v-show="selectShow"  
                :list="list"  
                v-on:receive="changeValueHandle" 
              > 
               
             
           `, 
      methods:{ 
        changeValueHandle(value){ 
          this.val = value; 
        } 
      } 
    }); 
    Vue.component("custom-list",{ 
      props:["list"], 
      template:`<ul class="list"> 
              <li v-for="item in list" @click="selectValueHandle(item)">{{item}} 
               
           `, 
      methods:{ 
        selectValueHandle:function(item){ 
          this.$emit("receive",item) 
        } 
      } 
    }) 
    new Vue({ 
      el:"#app", 
      data:{ 
        list1:[&#39;北京&#39;,&#39;上海&#39;,&#39;广州&#39;,&#39;杭州&#39;], 
        list2:[&#39;17-01-11&#39;,&#39;17-02-11&#39;,&#39;17-03-11&#39;,&#39;17-04-11&#39;], 
      } 
    }) 
  </script> 
    

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。もっと面白いものを知りたい場合は、php 中国語 Web サイトのその他の関連記事に注目してください。

推奨読書:

React を使用する場合は再レンダリングを避ける

vue select コンポーネントの使用方法と無効化方法

以上がVueのselect組み込みコンポーネントを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。