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

jiutainguixiao

13964人浏览 · 2021-02-04 00:02:37

jiutainguixiao · 2021-02-04 00:02:37 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^