再加一个也行，不放在state下，行不行呢？

news/2024/7/10 0:36:47 标签: vue 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陈尼克</title>
<style>
  [v-cloak] {
    display: none;
  }
</style>
</head>


<body>
  <div id="app" v-cloak>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ state.age }}</p>
    <p>职业: {{ state.work }}</p>
    <p>爱好: {{ state.hoppy }}</p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
   
    <script>
      //import { defineProps, reactive } from 'vue'
      
      //import { createApp, ref, reactive } from 'vue'
      const { createApp, ref, reactive } = Vue;
      const App = {
        setup() {
          const name = ref("Nick")
          const state = reactive({
            age: "18",
            work: "前端工程师",
            hoppy: "reading",
          });
          return {
            state,
            name,
          };
        },
      };

      createApp(App).mount("#app");
      </script>
     
</body>
</html>

这样不行，爱好的内容不显示


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陈尼克</title>
<style>
  [v-cloak] {
    display: none;
  }
</style>
</head>


<body>
  <div id="app" v-cloak>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ state.age }}</p>
    <p>职业: {{ state.work }}</p>
    <p>爱好: {{ hoppy }}</p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
   
    <script>
      //import { defineProps, reactive } from 'vue'
      
      //import { createApp, ref, reactive } from 'vue'
      const { createApp, ref, reactive } = Vue;
      const App = {
        setup() {
          const name = ref("Nick")
          const hoppy = ref("Reading")
          const state = reactive({
            age: "18",
            work: "前端工程师",
            //hoppy: "reading",
          });
          return {
            state,
            name,
          };
        },
      };

      createApp(App).mount("#app");
      </script>
     
</body>
</html>

这样写行，但是有点乱

```csharp

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陈尼克</title>
<style>
  [v-cloak] {
    display: none;
  }
</style>
</head>


<body>
  <div id="app" v-cloak>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ state.age }}</p>
    <p>职业: {{ state.work }}</p>
    <p>爱好: {{ state.hoppy }}</p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
   
    <script>
      //import { defineProps, reactive } from 'vue'
      
      //import { createApp, ref, reactive } from 'vue'
      const { createApp, ref, reactive } = Vue;
      const App = {
        setup() {
          const name = ref("Nick")
          const state = reactive({
            age: "18",
            work: "前端工程师",
            hoppy: "reading",
          });
          return {
            state,
            name,
          };
        },
      };

      createApp(App).mount("#app");
      </script>
     
</body>
</html>

这样不行，爱好的内容不显示


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陈尼克</title>
<style>
  [v-cloak] {
    display: none;
  }
</style>
</head>


<body>
  <div id="app" v-cloak>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ state.age }}</p>
    <p>职业: {{ state.work }}</p>
    <p>爱好: {{ hoppy }}</p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
   
    <script>
      //import { defineProps, reactive } from 'vue'
      
      //import { createApp, ref, reactive } from 'vue'
      const { createApp, ref, reactive } = Vue;
      const App = {
        setup() {
          const name = ref("Nick")
          const hoppy = ref("Reading")
          const state = reactive({
            age: "18",
            work: "前端工程师",
            //hoppy: "reading",
          });
          return {
            state,
            name,
          };
        },
      };

      createApp(App).mount("#app");
      </script>
     
</body>
</html>

http://www.niftyadmin.cn/n/957738.html

相关文章

idea 自动提示数据库信息

idea 自动提示数据库信息

1. 在idea中编写sql时候很容易出现列名错误&#xff0c;可以在idea中进行配置。建立连接 添加一个新的连接&#xff0c;出现连接的配置信息&#xff0c;可以根据连接填写信息。test connection 测试之后&#xff0c;如果没有驱动会自动打上驱动。 配置完成之后&#xff0c;会出…
阅读更多...
MYSQL8的my.ini位置

MYSQL8的my.ini位置

C:\ProgramData\MySQL\MySQL Server 8.0
阅读更多...
@Service注解是标注在实现类上的的接口中添加注解还是在实现类impl

@Service注解是标注在实现类上的的接口中添加注解还是在实现类impl

Service注解是标注在实现类上的 因为Service是把spring容器中的bean进行实例化&#xff0c;也就是等同于new操作&#xff0c;只有实现类是可以进行new实例化的&#xff0c;而接口则不能&#xff0c;所以是加在实现类上的。 IOC的思想&#xff1a;A不直接调用B&#xff0c;而是…
阅读更多...
这样写也行，把hoppy放在ref这里，name放在state这里，只是相应的位置要改动，段落那里排好就行

这样写也行，把hoppy放在ref这里，name放在state这里，只是相应的位置要改动，段落那里排好就行

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>陈尼克</title> <style>[v-cloak] {display: none;} </style> </head><body><div id"app" v-cloak><p>姓名: {{ s…
阅读更多...
python opencv中无法读写中文路径图片的解决办法

python opencv中无法读写中文路径图片的解决办法

读取图片&#xff1a; img cv2.imdecode(np.fromfile(img_path, dtypenp.uint8), 1) 1 其中img_path为读取图片路径&#xff0c;可以包含中文 保存图片&#xff1a; cv2.imencode(.jpg, src)[1].tofile(save_path) 1 其中save_path为保存图片路径&#xff0c;可以包含中文&…
阅读更多...
FeignClient中name和url属性的作用

FeignClient中name和url属性的作用

定义: feign是声明式的web service客户端&#xff0c;它让微服务之间的调用变得更简单了&#xff0c;类似controller调用service。 Spring Cloud集成了Ribbon和Eureka&#xff0c;可在使用Feign时提供负载均衡的http客户端。 场景: 通过feign调用Eureka上注册的服务,需要指定…
阅读更多...
zuul实现的限流

zuul实现的限流

限流一般可以根据客户端IP&#xff0c;请求的URL&#xff0c;用户登陆信息进行限制&#xff0c;每秒钟限制多次数&#xff0c;这从别一方面也提升了系统的性能&#xff0c;无用的并发没那么多了。 依赖包 <dependency><groupId>org.springframework.cloud</gro…
阅读更多...
为啥现在又醒了呢，用vite2，刚才那个有什么问题？

为啥现在又醒了呢，用vite2，刚才那个有什么问题？

<template><div id"app"><p>姓名: {{ name }}</p><p>职业: {{ state.work }}</p></div> </template><script> //import HelloWorld from ./components/HelloWorld.vue//import { ref, reactive } from "…
阅读更多...
最新文章

Copyright @ 2022~2023