入门：Vue六大常用内置指令( 二 ) _Vue

专属修饰符只能给v-model使用的修饰符
专属修饰符
说明
.number
自动将用户输入的值转为数值类型
.trim
自动过滤用户输入的首尾空白字符
.lazy
在失去焦点时才自动更新数据（一般情况下都是实时更新的）
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>复制代码五、条件渲染指令v-show控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为动态添加/移除display：none样式，一般用于需频繁切换
<p v-show="flag">这是被 v-show 控制的元素</p>复制代码v-if控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为动态创建/移除元素，一般用于默认不展示且展示较少
<p v-if="flag">这是被 v-if 控制的元素</p>复制代码v-else-if配合 v-if 指令一起使用，否则将不会被识别
<div v-if="type === 'A'">优秀</div><div v-else-if="type === 'B'">良好</div><div v-else-if="type === 'C'">一般</div><div v-else>差</div>复制代码六、列表渲染指令v-for基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"

item是被循环的每一项，名字随意
items是待循环的数组，名字随意

<table><thead><th>索引</th><th>ID</th><th>姓名</th><th>性别</th></thead><tbody><!-- v-for还支持一个可选的第二个参数，即当前项的索引 。语法格式为(item,index)in items --><!-- 注意：item和index都是形参，可以根据需要进行重命名，如：(user,i)in userlist --><!-- 注意：item和index除了可以被自己的子元素访问外，自身也可以使用 --><!-- 注意：只有在需要用到索引时，才写这第二个参数 --><tr v-for="(item,index) in list"><td>{{ index }}</td><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.gender }}</td></tr></tbody></table>------------------------------------------------------------<script>//创建vue的实例对象const vm = new Vue({data: {list: [{ id: 1, name:'张三', gender:'男' },{ id: 2, name:'李四', gender:'女' },{ id: 3, name:'王五', gender:'男' }]}})</script>复制代码

注意：在.vue文件中，只要用到 v-for指令，一定要绑定一个 :key 属性