这个在项目里，setup不知道怎么摆

最新推荐文章于 2024-09-19 17:56:32 发布

hamimelon2020

最新推荐文章于 2024-09-19 17:56:32 发布

阅读量52

点赞数

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

本文链接：https://blog.csdn.net/weixin_40945354/article/details/121028718

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

<template>
  <div id="app">
    <button type="button" @click="increment">count值：{{ state.count }}</button>
  </div>
</template>

<script>

export default {
//name: 'HelloWorld',
app.component('HelloWorld'),{
  props: ['Hello'],
  setup(){
    const state = Vue.reactive({count:0});
    function increment(){
      state.count++;
    }
    return {
      state,
      increment
    }
  }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

又一个错的

<template>
  <div id="app">
    <button type="button" @click="increment">count值：{{ state.count }}</button>
  </div>
</template>

<script>

import { reactive } from 'vue'
export default {
  name: 'HelloWorld',
app.component('HelloWorld'),{
  props: ['Hello'],
  setup(){
    const state = Vue.reactive({count:0});
    function increment(){
      state.count++;
    }
    return {
      state,
      increment
    }
  }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>