Заметки для меня и коллег. Темы — разработка, продвижение сайтов, заработок в интернете.

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

Код:

<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.

Пример выполнения: https://sapid.info/examples/multilingual-webpage-on-vue-js/


Комментарии к статье