又重写修改了nick前端工程师的代码,把它提到App.vue里来了

news/2024/7/9 23:52:06 标签: vue

还把const app修改成export default {

<template>
  <title>陈尼克</title>
  <div id="app" v-cloak>
  <p>姓名: {{ name }}</p>
  <p>职业: {{ state.work }}</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  setup() {
    const name = ref("Nick")
    const state = reactive({
      work: "前端工程师",
    });
    return {
      state,
      name,
    };
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

下面修改一下他的工作
不对

<template>
  <title>陈尼克</title>
  <div id="app" v-cloak>
  <p>姓名: {{ name }}</p>
  <p>职业: {{ state.work }}</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  setup() {
    const name = ref("Nick")
    const state = reactive({
      work: "前端工程师",
    }),
    const state.work.value = "摄影师";
    return {
      state,
      name,
    };
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

加了一个年龄

<template>
  <title>陈尼克</title>
  <div>
  <p>姓名: {{ name }}</p>
  <p>职业: {{ state.work }}</p>
  <p>年龄: {{ state.age }}</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  setup() {
    const name = ref("Nick")
    const state = reactive({
      work: "前端工程师",
      age: "18",
    });
    
    return {
      state,
      name,
    };
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


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

相关文章

微信小程序css篇----外边距(margin)和内边距(padding)

说到边距&#xff0c;那这个基本上跟android里的概念差不多&#xff0c;先来看一个图吧&#xff0c;&#xff08;虽然标注的丑了点&#xff0c;不过那不是重点&#xff09; 一.margin&#xff1a;外边距&#xff1b;设置对象四边的外延边距。 margin: 20rpx 10rpx 25rpx 10rp…

想修改时间而不会

<template><title>陈尼克</title><div><p>姓名: {{ name }}</p><p>职业: {{ state.work }}</p><p>年龄: {{ state.age }}</p><p>时间: {{ state.time }}</p><button>修改</button></d…

mysql的备份表的几种方法

-- MYSQL 复制表 create table A as select * from B; create table A like B;insert into A select * from B;

keras使用中,val_acc和acc值不同步的思考

在一个比较好的数据集中&#xff0c;比如在分辨不同文字的任务中&#xff0c;一下是几个样本 使用VGG19&#xff0c;vol_acc和acc基本是同步保持增长的&#xff0c;比如 40/40 [] - 23s 579ms/step - loss: 1.3896 - acc: 0.95 - val_loss: 1.3876 - val_acc: 0.95 Epoch 13/1…

微信小程序 生成跳转体验版url,可直接跳转到体验版小程序(可通过此方法测试模板消息)

https://open.weixin.qq.com/sns/getexpappinfo?appid这里填写你的appId&path需要跳转的小程序地址 注意&#xff1a;需要跳转的小程序地址&#xff0c;需要在 地址最后 参数前 增加.html 例如我需要跳转体验版的小程序地址为 pages/home/index?nameuser 需要调整为 …

python 使用cv2、io.BytesIO处理图片二进制数据

参考资料&#xff1a;http://www.voidcn.com/article/p-sabqihis-bry.html 参考资料: https://blog.csdn.net/yang_bingo/article/details/840662171、使用cv2 import cv2 import numpy as np from matplotlib import pyplot as plt from PIL import Image img_url rC:\Users\…

anaconda 环境导出/导入

从A机器中导出环境到B机器中&#xff1b; 首先在进入到A机器的环境中 conda env list 查找所有环境 激活进入到所要导出的环境中 activate python36 python36为要导出的环境名称 导出环境 到yml文件&#xff0c; 文件名为 python36_20190106.yml conda env export --f…

微信模板消息跳转小程序

微信模板消息跳转小程序 点击微信模板消息跳转小程序后台实现 需求 实现效果 后台实现&#xff1a; 点击微信模板消息跳转小程序后台实现 需求 1.用户状态改变时&#xff0c;后台通过公众号给用户推送相关消息 2.用户点击推送消息跳转到小程序页面 实现效果 后台实现&#xff…