vue中的指令v-for循环遍历、v-if条件判断v-show,v-on事件监听、事件修饰符

科技2022-07-12 126

vue中的条件渲染

v-else-if

当有else分支逻辑的时候，可以给该元素加上v-else指令来控制，v-else会根据上面的那个v-if来控制，效果与v-if相反，注意，一定要紧挨着

还有v-else-if指令可以实现多分支逻辑

在元素上使用v-if条件渲染分组

根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了v-if也有v-else-if和v-else之类；

在元素上使用v-show条件渲染分组

除了v-if之外，Vue还提供v-show也可以控制元素的渲染。 v-show和v-if功能有点相似，其中v-if依赖于控制DOM节点，而v-show是依赖于控制DOM节点的display属性。当v-show传入的值为true时，对应DOM元素的display的值为block之类的，反之为false时，display的值为none。也就是用户看不到元素的显示，但其DOM元素还是存在的

总结

v-if和v-show都是用来控制元素的渲染　　v-if是根据后面数据的真假，来判断DOM的添加删除等操作　　v-show只是在修改元素的css样式（display属性值）　　v-if如果初始渲染条件为真，就渲染，反之就不渲染　　v-show不管初始条件是否为真，都会被渲染　　v-if有更高的切换消耗，不适合做频繁的切换　　 v-show有更高的初始渲染消耗，适合做频繁的切换

vue中的列表渲染

v-for

在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items,还可以遍历对象，第一个参数是value，第二个是key，第三个依然是索引

v-for="(value, key) in mapObject" :key="key" 其中key为键，value为对应的值

key

跟踪每个节点的身份，从而重用和重新排序现有元素 *理想的 key 值是每项都有的且唯一的 id。data.id

v-on指令监听

在vue中使用v-on为dom绑定事件在v-on后面添加绑定事件将一些方法设置在methods 可以绑定多个方法 v-on可以简写成 @v-on:click----@click

<div id="app-5"> <p>{ { message } }</p> <button v-on:click="reverseMessage">逆转消息</button> </div> var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })

事件修饰符

事件修饰符：stop、prevent、self、once

键盘修饰符：enter、space、up、down

表单修饰符修饰符：number、trim、lazy

<a v-on:click.stop="doThis"></a>  <form v-on:submit.prevent="onSubmit"></form>  <a v-on:click.stop.prevent="doThat"></a>  <form v-on:submit.prevent></form>  <a v-on:click.once="doThis"></a>  <div v-on:click.self="doThat">...</div>

v-model

v-model底层原理实现？绑定了value属性与监听了input事件 v-model修饰符有哪些？ 1.v-model.lazy 默认是实时更新，如果加了lazy修饰符，只有失去焦点的时候，内部才会更新 2.v-model.number 这个值无法被parseFloat解析的时候原样输出，否则转换 3.v-model.trim 去掉前后空格注意： v-model指令只能用在组件或者表单控件中你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑

代码展示：

<body> <div id="app"> <p>{{msg}}</p> <p><input type="text" v-model="msg"></p> <hr> <p>{{msg}}</p> <p><input type="text" v-model.lazy="msg"></p> <hr> <p>{{msg}}</p> <p><input type="text" v-model.number="msg"></p> <hr> <p>{{msg}}</p> <p><input type="text" v-model.trim="msg"></p> <hr> <p>{{msg2}}</p> <p><input type="text" v-bind:value="msg2" @input="msg2=$event.target.value"></p> </div> <script src="./base/vue.min.js"></script> <script> new Vue({ el:"#app", data:{ msg:"hello world", msg2:"" } }) </script> </body> `` **嘻嘻**

Processed: 0.011, SQL: 8