1. 主页
  2. 文档
  3. Vue3.js
  4. 1-2 编写字符串反转和内容隐藏小功能

1-2 编写字符串反转和内容隐藏小功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 2</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // Vue.createApp({
  //   data() {
  //     return {
  //       content: 'hello world'
  //     }
  //   },
  //   methods: {
  //     handleBtnClick() {
  //       this.content = this.content.split('').reverse().join('');
  //     }
  //   },
  //   template: `
  //     <div>
  //       {{content}}
  //       <button v-on:click="handleBtnClick">反转</button>
  //     </div>
  //   `
  // }).mount('#root');
  Vue.createApp({
    data() {
      return { show: true }
    },
    methods: {
      handleBtnClick() {
        this.show = !this.show;
      }
    },
    template: `
      <div>
        <span v-if="show">hello world</span>
        <button v-on:click="handleBtnClick">显示/隐藏</button>
      </div>
    `
  }).mount('#root');
</script>
</html>
这篇文章对您有用吗?

我们要如何帮助您?