vue 简单实验 v-for 循环

news/2024/7/5 20:30:36 标签: vue.js, 前端, javascript

1.代码

<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>
<div id="list-rendering">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
<script>
const ListRendering = {
  data() {
    return {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  }
}
Vue.createApp(ListRendering).mount('#list-rendering')
</script>

 

2.运行效果


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

相关文章

【已解决】pycharm突然双击无法打开,重启电脑也不管用

1.问题&#xff1a; pycharm突然双击无法打开&#xff0c;重启电脑也不管用 2.解决 2.1 方法一&#xff08;修改Roaming&#xff09; 1.找到C盘对应路径下的pycharm版本 2. 用记事本打开文件类型为VMOPTIONS文件 3. 修改或删除最后一行的映射路径 4.保存退出 2.2 方法二…

【计算机基础】一文搞清楚什么是线程/进程/协程

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…

浮点动作 转 布尔动作(FloatActionToBooleanAction)

文章目录 思维导图具体步骤1、“浮点动作”的创建2、“布尔动作”的创建3、用“FloatToBoolean.cs”把两个动作联系起来 注意 思维导图 具体步骤 1、“浮点动作”的创建 “右手柄 扳机键 按下”需借助“Input.UnityInputManager.1DAxisAction”预设体成为FloatAction&#xf…

【C++多线程】C++11互斥锁和条件变量实现生产者消费者模型

先看几个问题&#xff0c;第三个问题可以先看代码然后再理解 Q1&#xff1a;临界区在哪 A1: 队列中元素在「生产者生产&#xff08;push&#xff09;」和「消费者消费&#xff08;pop&#xff09;」时就是临界区 Q2&#xff1a;同步操作在哪 A2: 很显然&#xff0c;队列只有…

HCIP-HCS华为私有云的使用

1、概述 HCS&#xff08;HuaweiCoudStack&#xff09;华为私有云&#xff1a;6.3 之前叫FusionSphere OpenStack&#xff0c;6.3.1 版本开始叫FusionCloud&#xff0c;6.5.1 版本开始叫HuaweiCloud Stack (HCS)华为私有云软件。 开源openstack&#xff0c;发放云主机的流程&am…

11292 - Dragon of Loowater (UVA)

Online Judge 开始的代码如下&#xff1a; #include <cstdio> #include <vector> #include <algorithm>int n, m, i, j, sum; std::vector<int> head, knight; bool flag, ff;int main(){scanf("%d %d", &n, &m);while(n ! 0 || m…

一般情况组件的state状态或者是props发生改变时就会进行刷新渲染,但有时需要进行用户控制,那么有哪些方法呢

1.最差的方式&#xff1a;刷新页面,对用户体验不好 2.常见的方法&#xff1a;v-if控制组件的显示 3.利用forceUpdate强制更新&#xff0c;将触发updated钩子函数 <template> <div id"app"> <h1>{{Math.random()}}</h1> <button click&…

linux文件复制覆盖命令

目录 cp 命令参数2.cp -rf 出现复制不覆盖文件问题3.解决文件复制覆盖提示操作问题&#xff0c;以下四种方式&#xff0c;供大家参考使用。方法1&#xff1a;编写带cp的路径复制覆盖文件方法2&#xff1a;在CP命令前面加一个斜杠\&#xff0c;实现强制覆盖文件方法3&#xff1a…