vue 3.0 html文件中使用 setup reactive ref 练习

最新推荐文章于 2023-12-14 16:20:39 发布

web_Hsir

最新推荐文章于 2023-12-14 16:20:39 发布

阅读量521

点赞数

分类专栏：技术文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44185995/article/details/125098063

版权

技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">
      <p>{{message}}</p>
      <p>count：{{ state.count }}</p>
      <p>
        <button @click="increment">add count</button>
      </p>
      <p>
        <button @click="revserMsg">reserve</button>
      </p>
      <ul>
        <li v-for="(item,index) in options" :key="index">
          {{item.label}} -- {{item.value}}
        </li>
      </ul>
      
    </div>
    <script>
      const App = {
        setup() {
          const state = Vue.reactive({ count: 0 });
          const message = Vue.ref('');
          message.value = 'this is msg';
          function increment() {
            state.count++;
          }
          function revserMsg() {
            message.value = message.value.split('').reverse().join('');
          }
          const options = Vue.reactive([
            {
              label:"ceshi 1",
              value:'1'
            },
            {
              label:"ceshi 1",
              value:'2'
            },
            {
              label:"ceshi 1",
              value:'3'
            }
          ])
          return {
            state,
            message,
            options,
            increment,
            revserMsg,
          };
        },
      };
      Vue.createApp(App).mount('#app');
    </script>
  </body>
</html>