| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>index</title>
- </head>
- <body>
- <!-- <h3>this is node -> Vue test</h3> -->
- <div id='app' style='color:red; font-size:20px; font-weight:bold;'>app node start...</div>
- <template id="my-app">
- <!--<div v-html='info'></div>
- <Home @op="add">home vue</Home>
- <h5 style="color:oranged">{{number}}</h5>
- <About>this is About</About>
- <test></test>-->
- <div class="flex flex-wrap gap-4 item-center">
- <el-select
- v-model="value"
- placeholder="Select"
- size="large"
- style="width: 240px"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- @click="changelang(item.value)"
- />
- </el-select>
- </div>
- <br/>
- <!--避免使用单标签，组件按照双标签规范用； js代码相对位置导入后可以直接使用 -->
- <p>before i18n label</p>
- <div v-t="'messages.username'"></div>
- {{$t('messages.login')}}
- <p>after i18n label</p>
- <label @click="changelang('zh')">中文</label>
- <label @click="changelang('en')">english</label>
- <!--<input type="button" text="中文" @click="changelang('zh')"/>
- <input type="button" text="english" @click="changelang('en')"/>-->
- <p>
- <router-link to="/home">首页</router-link>
- <router-link to="/test">test</router-link>
- <router-link to="/about">关于</router-link>
- </p>
- <router-view></router-view>
- </template>
- <template style="width:100%; backgroud-color:oranged;">
- <Home @op="add">home vue</Home>
- <h2>{{number}}</h2>
- </template>
- </body>
- </html>
|
