HelloWorld.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <div class="hello">
  3. <h1>{{ msg }}</h1>
  4. <p>
  5. <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-clidocumentation</a>.
  6. </p>
  7. <h3>Installed CLI Plugins</h3>
  8. <ul>
  9. <li>
  10. <Button @click="test">00000</Button>
  11. </li>
  12. <Tabs value="name1">
  13. <TabPane label="标签一" name="name1">标签一的内容</TabPane>
  14. <TabPane label="标签二" name="name2">标签二的内容</TabPane>
  15. <TabPane label="标签三" name="name3">标签三的内容</TabPane>
  16. </Tabs>
  17. </ul>
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22. name: 'HelloWorld',
  23. props: {
  24. msg: String
  25. },
  26. data() {
  27. return {
  28. }
  29. },
  30. methods: {
  31. test() {
  32. this.$api.getTest({}).then(res => {
  33. alert(res);
  34. })
  35. }
  36. }
  37. }
  38. </script>
  39. <!-- Add "scoped" attribute to limit CSS to this component only -->
  40. <style scoped lang="less">
  41. h3 {
  42. margin: 40px 0 0;
  43. }
  44. ul {
  45. list-style-type: none;
  46. padding: 0;
  47. }
  48. li {
  49. display: inline-block;
  50. margin: 0 10px;
  51. }
  52. a {
  53. color: #42b983;
  54. }
  55. </style>