vue初体验

╰+攻爆jí腚メ 2022-10-27 12:11 207阅读 0赞

> `vue初体验`

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          
          
          <h1>系统名称:{
       {title}}</h1>
          <ul>
            <li v-for="(item, i) in products">
              商品名称:{
       {item.name}}
              <button @click="changeStock(item,item.stock - 1)">-</button>
              <span v-if="item.stock>0">库存:{
       {item.stock}}</span>
              <span v-else>无货</span>
              <button @click="changeStock(item,item.stock + 1)">+</button>
              <button @click="remove(i)">删除</button>
            </li>
          </ul>
        </div>
        <script src="./vue.min.js"></script>
        <script> //vm: vue实例 var vm = new Vue({ //配置 el: "#app", //css选择器 data: { //和界面相关的数据 title: "库存管理系统", products: [ { name: "iphone", stock: 10 }, { name: "xiaomi", stock: 20 }, { name: "huawei", stock: 30 }, ], }, methods: { remove(i) { //this指向vm this.products.splice(i, 1); }, changeStock(product, newStock) { if (newStock < 0) { newStock = 0; } product.stock = newStock; }, }, }); </script>
      </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue.js】014-Vue：概述、初体验

目录一、Vue概述 1、简介 2、Vue安装方式一：直接使用方式二：NPM（不直到为什么，从这里目录无法自动生成，手动打出来吧！）方式三：命令行工具 (

た入场券/ 2023年10月05日 17:55/ 0 赞/ 7 阅读

相关 Vue - Hello World 初体验

推荐：[Vue汇总][Vue] Vue - Hello World 初体验介绍 > Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为

╰半橙微兮°/ 2022年12月19日 01:23/ 0 赞/ 97 阅读

相关 Vue初体验

这段时间忙里偷闲，见缝插针，试验了一下Vue。demo只有2个页面，一个弹出窗口，如下：一、成果 1、首页 ![在这里插入图片描述][watermark_type

朴灿烈づ我的快乐病毒、/ 2022年12月15日 02:25/ 0 赞/ 263 阅读

相关 Vue 3.0 初体验

Vue3.0 beta也出来一段时间了，最近一直在看react，对于vue3.0倒是没怎么关注，想着等正式版出来再说，不过最近事情不多，还是抽出了一点时间，试了一下新版的Vue

素颜马尾好姑娘i/ 2022年11月26日 07:51/ 0 赞/ 176 阅读

相关 bpmn.js在vue中初体验

> 前提：项目中需要绘制流程图的需求，涉及到Activiti和Bpmn.js的使用，接下来就来看看如何在Vue中使用Bpmn.js绘制在线流程图吧。额，[bpmn.js][

偏执的太偏执、/ 2022年10月28日 03:54/ 0 赞/ 938 阅读

相关 vue初体验

> `vue初体验` <!DOCTYPE html> <html lang="en"> <head> <meta charset=

╰+攻爆jí腚メ/ 2022年10月27日 12:11/ 0 赞/ 208 阅读

相关 JointJS与vue集成初体验

将 JointJS 添加到 Vue 项目中安装需要的包 npm 方式 npm install jointjs yarn 方式 yarn ad

清疚/ 2022年10月12日 14:59/ 0 赞/ 176 阅读

相关初体验egg-vue-singal-page

egg在koa框架的基础上进行了封装，并集合了现今热门的vue、react框架，支持服务端渲染，可以说是全端开发的一个优秀实践。关于demo和api，可以在[官网][Link

矫情吗；*/ 2022年10月01日 10:44/ 0 赞/ 215 阅读

相关 Vue+Express+Mysql 全栈初体验

前言 [原文地址][Link 1] 曾几何时，你有没有想过一个前端工程师的未来是什么样的？这个时候你是不是会想到了一个词”前端架构师“，那么一个合格的前端架构只会前端O

╰半橙微兮°/ 2022年01月19日 01:43/ 0 赞/ 249 阅读

相关 Gitbook初体验

安装 GitBook 是一个基于 Node.js 的命令行工具，安装Node.js sudo apt install nodejs 查看版本 nod

快来打我*/ 2021年10月31日 16:42/ 0 赞/ 565 阅读