控制台验证

条件渲染

指令释义v-if相当于： ifv-else相当于：elsev-else-if相当于：else ifh1{text-align:center;background:tomato;}p{font-size:48px;text-align:center;} id="app">

成绩等级

v-if="score>90">优秀

v-else-if="score>80">良好

v-else-if="score>60">及格

v-else>不及格

列表渲染

使用v-for和v-if控制列表渲染

id="app"> v-if="goods_list.length>0" > border="2">商品名称价格 v-for="good in goods_list">{{ good.name }}{{ good.price }} v-else>购物车为空

v-for遍历数组(列表)、对象(字典)、数字

遍历对象

v-for遍历对象，在python中显示的是kv，但是在这里顺序相反，显示的是vk

id="app"> v-for="oneinfo in info">{{ oneinfo }} v-for="(v,k) in info">key值：{{ k }}value值：{{ v }}------------------------------------------------

遍历数组

遍历数组的时候，接收一个值的时候是value，接收两个值的时候是value，index，值索引顺序和python遍历出的结果相反

id="app"> v-for="hobby in ball">{{ hobby }} v-for="(value,index) in ball">{{ index }}{{ value }}----------------------------------------------------------

遍历数字 id="app"> v-for="a in 5">{{ a }}--------------------------------------------

注意！在Vue中：

数组的index和value是反的对象的key和value也是反的

key值 的解释

vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）

在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，值不要是固定的值，比如如果都是1那么就混乱了页面更新之后，会加速DOM的替换（渲染）:key="变量"

比如Element ui的例子

<template><el-carousel indicator-position="outside"><el-carousel-item v-for="item in 4":key="item"><h3>{{item}} <div v-for="hobby in ball"><ul><li>{{hobby}} <ul><li v-for="data in newList">{{data}}

方式一： type="text"v-model="mytext"@keyup="handleKeyUp($event)">

方式二： type="text"v-model="mytext1"@keyup.enter="handleKeyUp1($event)">

方式一输入的：{{ mytext }}

方式二输入的：{{ mytext1 }}

表单控制

主要是input(输入框)、checkbox(复选框，多选)、radio(单选)

checkbox单选

实际生活比如登录的记住密码功能

lang="en"> charset="UTF-8"></span><span id="9655dec3-6776-4ca3-95b8-959f66daa039">checkbox</span><span id="318bdd98-1561-466b-9d00-e642db9ec5a2"> src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"> id="box"> type="text"placeholder="请输入用户名："> type="password"placeholder="请输入密码："> type="checkbox"v-model="radio">记住用户名

checkbox多选

选了多个可以放入数组