Vue.jsまねるSelectの下で枠の効果を引きます。
本論文の例では、Vue.jsのフレームダウン効果の具体的なコードを共有します。参考にしてください。具体的な内容は以下の通りです。
無駄話はもちろん、直接にコードを入力します。
効果図:
HEML:
vue.jsコンポーネントの教程については、テーマvue.jsコンポーネント学習教程をクリックして学習してください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
無駄話はもちろん、直接にコードを入力します。
効果図:
HEML:
<div id="demo">
<h2 class="title"> </h2>
<imitate-select h2-value=" Select" v-bind:list="list1"></imitate-select>
<h2 class="title"> </h2>
<imitate-select h2-value=" Select" v-bind:list="list2"></imitate-select>
</div>
Javascript:
<script>
// 【 】
Vue.component('imitate-select', {
data: function(){ //
return {
selectShoe: false,
val: ''
}
},
props: ['h2Value', 'list'], // 【 : h2-value( ) , h2Value】
template: `<section class="main">
<div class="select">
<h2 class="fuzhi">{{ h2Value }}</h2>
<div class="select_header">
<input type="text" class="select_input" placeholder=" Select " @click="selectShoe = !selectShoe" :value="val" ><i></i>
</div>
<select-list v-show="selectShoe" :list="list" @receive="changeHandle"></select-list>
</div>
</section>`,
methods: {
changeHandle(value){ //
// alert(' ! :' + value)
this.val = value
}
}
});
Vue.component('select-list', {
props: ['list'],
template: `<ul class="select_list">
<li v-for="item of list" @click="selectHandle(item)">{{ item }}</li>
</ul>`,
methods: {
selectHandle: function (item){
this.$emit('receive', item)
}
}
});
new Vue({
el: '#demo',
data: {
list1: ['HTML','CSS','Javascript','Vue.js'],
list2: ['PHP','JAVA','C++','.NET']
}
})
</script>
もっと多い教程は《Vue.jsフロントエンドコンポーネント学習教程》をクリックして、みんなを歓迎して読みます。vue.jsコンポーネントの教程については、テーマvue.jsコンポーネント学習教程をクリックして学習してください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。