<ul>

      <!-- v-for参数：item是数组循环的每一项，i是下标 -->

      <li v-for="(item, i) in data">{{data.param}}</li>

      <!-- 下标可以省略，简写为 -->

      <li v-for="item in data">{{item.param}}</li>

</ul>

<div v-if="item.show==1">价格情况：</div>

<div v-if="item.price>10000">贵</div>

<div v-else-if="item.price>5000">中等</div>

<div v-else>便宜</div>

<div v-if="item.number<1">，没有库存</div>

<div v-show="false">隐藏</div>

//通过变量

data: {

      show_status: true

}

<div v-show="show_status">变量控制</div>

//定义变量content的值

data: {

      content: '<p style="color:red">我是P标签</p>';

}

若通过两个大括号渲染：{{content}}，p标签也会被当做字符串输入到页面

正确渲染方法

<div v-html="content"></div>

//若元素中有内容，使用v-html后将失效

<div v-html="content">div中原有的内容，使用v-html后将被替换成新内容</div>

//定义变量

data: {

      Url: 'https://www.baidu.com/',

      imgUrl: 'https://www.daxiao.show/uploadfile/2022/1122/20221122020048279.png'

}

//使用v-bind绑定属性，变量直接写，不需要{{}}

<a v-bind:href="Url">点击跳转</a>

//使用v-bind渲染图片

<img v-bind:src="imgUrl" width="500">

//以上可简写为

<a :href="Url">点击跳转</a>

<img :src="imgUrl" width="500">

<button v-on:click="func($event)">点击事件</button>

<!-- 使用@简写，并省略参数 -->

<button @click="func">点击事件</button>

<!-- 阻止默认行为，此时点击span并不会触发外层的跳转 -->

<a href="https://www.baidu.com/">

      <span @click.prevent="func()"></span>

</a>

<!-- 阻止冒泡，此时点击func2并不会触发父级的func1 -->

<div @click="func1">

      <div @click.stop="func2">点击</div>

</div>

<!-- vue是渐进式的，并不要求整个网站全部使用vue，可以只在某个区域使用vue的功能 -->

<!--↓↓↓↓↓↓ vue控制的界面模板 ↓↓↓↓↓↓-->

<div id="app">

      <!-- vue使用mustache模板引擎 -->

      <h1>系统名称是：{{title}}</h1>

      <!-- 使用v-for循环遍历 -->

      <ul>

            <!--

                  v-for参数：

                  item 循环数组每一项

                  i 下标

            -->

            <li v-for="(item,i) in products">

                  商品名称：{{item.name}}，

                  <button v-if="item.num>0" @click="minus(item)">-</button>

                  <span v-if="item.num>0">数量：{{item.num}}</span>

                  <span v-else>没库存</span>

                  <button v-if="item.num>0" @click="item.num++">+</button>

                  &nbsp;

                  <button @click="del(i)">删除此项</button>

            </li>

      </ul>

</div>

<!--↑↑↑↑↑↑ vue控制的界面模板 ↑↑↑↑↑↑-->

<script src="./vue.js"></script>

<script>

var products = [

      {name: '苹果', num: 10},

      {name: '香蕉', num: 15},

      {name: '橘子', num: 20}

]

var methods = {

      minus(product){

            product.num = product.num - 1 < 0 ? 0 : product.num - 1;

      },

      del(index){

            //this 表示 vm 实例

            this.products.splice(index,1);

      }

}

//vm：vue实例

var vm = new Vue({

      //配置

      el: "#app", //css选择器

      data: {

            //和界面相关的数据

            title: '库存管理系统',

            products: products

      },

      methods: methods

});

</script>