<ul>

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

      <li v-for="(item, i) in data" :id="item.id">{{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>

<!-- 设置变量 -->

data: {

      content: "测试内容"

}

<!-- 使用v-bind设定input值， 使用v-on监听键盘松开事件并改变content的值（$event可以获取到事件对象）-->

<input type="text" :value="content" v-on:input="content=$event.target.value">

<!-- 通过v-model实现双向绑定，即可设定值，也可改变值 -->

<input type="text" v-model="content">