demo 原始链接:https://vux.li/demos/v2/#/component/button-tab
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <div style=\"padding: 15px;\">\n <button-tab>\n <button-tab-item>{{ $t('Today') }}</button-tab-item>\n <button-tab-item selected>{{ $t('This Week') }}</button-tab-item>\n <button-tab-item>{{ $t('This Month') }}</button-tab-item>\n </button-tab>\n <br>\n <divider>{{ $t('Use v-model to set selected item') }}</divider>\n <br>\n <button-tab v-model=\"demo01\">\n <button-tab-item @on-item-click=\"consoleIndex()\">{{ $t('Articles') }}</button-tab-item>\n <button-tab-item @on-item-click=\"consoleIndex()\">{{ $t('Products') }}</button-tab-item>\n </button-tab>\n <br>\n <button-tab v-model=\"demo01\">\n <button-tab-item>{{ $t('Articles sync') }}</button-tab-item>\n <button-tab-item>{{ $t('Products sync') }}</button-tab-item>\n </button-tab>\n <br>\n <divider>{{ $t('Red Dot') }}</divider>\n <br>\n <button-tab>\n <button-tab-item selected>{{ $t('All Messages') }}</button-tab-item>\n <button-tab-item><span class=\"vux-reddot-s\">{{ $t('New Messages') }}</span></button-tab-item>\n </button-tab>\n </div>\n </div>\n</template>\n\n\n\n<script>\nimport { ButtonTab, ButtonTabItem, Divider } from 'vux'\n\nexport default {\n components: {\n ButtonTab,\n ButtonTabItem,\n Divider\n },\n methods: {\n consoleIndex () {\n console.log('click demo01', this.demo01)\n }\n },\n data () {\n return {\n demo01: 0\n }\n }\n}\n</script>\n\n
\n