Приклади рішень на Vue.js

Category: Vue.js code examples

Код html

<div class="">
  <div class="">
    <select id="selcountry" v-model="selcountry" class="">
      <option selected="selected">All countries</option>
      <option>101</option>
      <option>102</option>
    </select>
  </div>
  <div class="">
    <select id="selsex" v-model="selsex" class="">
      <option selected="selected">Any gender</option>
      <option>201</option>
      <option>202</option>
      <option>203</option>
    </select>
  </div>
  <div class="">
    <select id="selvacancytitle" v-model="selvacancytitle" class="">
      <option selected="selected">All professions</option>
      <option>301</option>
      <option>302</option>
    </select>
  </div>
  <button id="clearselect" v-on:click="clearselect();">
    Reset filters
  </button>
</div>

Обработчик: начальная установка и сброс по клику по кнопке

<script type="text/javascript">
var vuejs = new Vue({
    el: '#vue',
    data: {
        selcountry: 'All countries',
        selsex: 'Any gender',
        selvacancytitle: 'All professions'
    },
    methods: {
        clearselect: function () {
            this.selcountry = 'All countries',
            this.selsex = 'Any gender',
            this.selvacancytitle = 'All professions'
        }
    }
}) 
</script>

Мультиязычность страницы на vue js

Пример можно найти по адресу https://example.your-site.online/vue-js-multilanguage/

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="vue">
    <div>
        <h2>Вывод результата</h2>
        <div v-if="( pagelang === 'en' )">Английский</div>
        <div v-if="( pagelang === 'tr' )">Турецкий</div>
        <div v-if="( pagelang === 'ru' )">Русский</div>
        <div v-if="( pagelang === 'uk' )">Украинский</div>
    </div>
    <div>
        <h2>Выбор языка через ссылку</h2>
        <div v-on:click="pagelang = 'en', savelang('en')">Английский</div>
        <div v-on:click="pagelang = 'tr', savelang('tr')">Турецкий</div>
        <div v-on:click="pagelang = 'ru', savelang('ru')">Русский</div>
        <div v-on:click="pagelang = 'uk', savelang('uk')">Украинский</div>
    </div>
</div>
<script type="text/javascript">
if ( localStorage.getItem('lang') === null ) { localStorage.setItem('lang', 'en') }
new Vue({
    el: '#vue',
    data: {
        pagelang: localStorage.getItem('lang'),
    },
    methods: {
        savelang: function (lang) {
            localStorage.setItem('lang', lang)
            pagelang: localStorage.getItem('lang');
            //alert(lang);
        }
    }
});
</script>

В примере фигурирует id vue. Это идентификатор обертки для всех блоков на которые распространяется действие скрипта vue.js.

Фильтр записей vue js

Пример можно найти по адресу: https://example.your-site.online/vue-js-filter/

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<main class="content" id="vue">
    <select  v-model="selletter">
        <option selected="selected">a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
        <option>e</option>
    </select>
    <select  v-model="selnum">
        <option selected="selected">1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
    <button id="clearselect" v-on:click="clearselect();">Reset filters</button>
    <div class=""> 
        <div class="" v-if="( selnum === '1' || selnum === '2' || selnum === '3' )">
            Принимает во внимание только цифры. Показывается, когда выбрано 1, 2, 3
        </div>
        <div class="" v-if="( selnum === '4' )">
            Принимает во внимание только цифры. Показывается, когда выбрано 4
        </div>
        <div class="" v-if="( selnum === '3' )">
            Принимает во внимание только цифры. Показывается, когда выбрано 3
        </div>
        <div class="" v-if="( selletter === 'b' )">
            Принимает во внимание только буквы. Показывается, когда выбрано b
        </div>
        <div class="" v-if="( selletter === 'b' || selletter === 'c' || selletter === 'd' )">
            Принимает во внимание только буквы. Показывается, когда выбрано b, c, d
        </div>
        <div class="" v-if="( selnum === '2' )" v-if="( selletter === 'b' )">
            Принимает во внимание и буквы и цифры. Показывается, когда выбрано одновременно и 2 и b
        </div>
        <div class="" v-if="( selnum === '1' || selnum === '2' || selnum === '5' )" v-if="( selletter === 'b' || selletter === 'c' )">
            Принимает во внимание и буквы и цифры. Показывается, когда выбрано одновременно (одно из 1, 2, 3) и (одно из b, c)
        </div>
    </div>

</main>

<script type="text/javascript">
new Vue({
    el: '#vue',
    data: {
        selletter: 'a',
        selnum: '1'
    },
    methods: {
        clearselect: function () {
            this.selletter = 'a',
            this.selnum = '1'
        }
    }
}) 
</script>

<style>
    .content > div > div { border: 1px solid red; padding: 20px; margin: 20px; }
</style>

s

( ['a','b','c','d','e'].indexOf( var ) != -1 )

s