vue初体验

最新推荐文章于 2024-07-17 18:14:28 发布

zhige@

最新推荐文章于 2024-07-17 18:14:28 发布

阅读量1.3w

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/nyasm/article/details/113622372

版权

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">
      <!-- 界面模板 -->
      <!-- mustache语法 -->
      <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>

zhige@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue初体验

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&gt.
复制链接

扫一扫

vue初体验

“相关推荐”对你有帮助么？