demo 原始链接:https://vux.li/demos/v2/#/component/marquee
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <divider>{{ $t('Default usage') }}</divider>\n <marquee>\n <marquee-item v-for=\"i in 5\" :key=\"i\" @click.native=\"onClick(i)\" class=\"align-middle\">hello world {{i}}</marquee-item>\n </marquee>\n <br>\n <divider>{{ $t('Used in a cell')}}</divider>\n <group>\n <cell :title=\"$t('News')\">\n <marquee>\n <marquee-item v-for=\"i in 5\" :key=\"i\" @click.native=\"onClick(i)\">{{ $t('JavaScript is the best language')}} {{i}}</marquee-item>\n </marquee>\n </cell>\n </group>\n <br>\n <divider>{{ $t('Async data')}}</divider>\n <marquee>\n <marquee-item v-for=\"i in asyncCount\" :key=\"i\" @click.native=\"onClick(i)\" class=\"align-middle\">hello world {{i}}</marquee-item>\n </marquee>\n </div>\n</template>\n\n\n\n<script>\nimport { Group, Cell, Marquee, MarqueeItem, Divider } from 'vux'\n\nexport default {\n components: {\n Marquee,\n MarqueeItem,\n Group,\n Cell,\n Divider\n },\n mounted () {\n setTimeout(() => {\n this.asyncCount = 5\n }, 1000)\n },\n methods: {\n onClick (i) {\n console.log(i)\n }\n },\n data () {\n return {\n asyncCount: 0\n }\n }\n}\n</script>\n\n<style scoped>\n.align-middle {\n text-align: center;\n}\n</style>\n
\n