Vue.js教程-Vue基本指令
前言
Vue指令
插值表达式
{{}}
双花括号方式获取data里的字符串或者对象。
v-bind
:
v-model
v-on
@
v-if、v-else、v-else-if
<!-- v-if登录 --> <template> <div> <div v-if="logintype === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </div> <div v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </div> <button @click="changelogintype">切换登录方式</button> </div> </template> <script> export default { data () { return { logintype : 'username' } }, methods:{ changelogintype(){ if(this.logintype === "username"){ this.logintype = "email" } else{ this.logintype = "username" } } } } </script> <style scoped> </style>
@click="changelogintype()"
,当我们不需要为这个方法传递参数时,我们可以不传参,有些特定的方法中传入的是event,根据具体情况使用。this
关键字。v-show和v-if的区别
v-for
<!-- v-for --> <template> <div> <!--数字数组--> <p v-for="item in list">{{item}}</p> <br/> <!--对象数组--> <p v-for="item in listObj" :key="item.id">{{item.id}}:{{item.name}} <br/> <!--对象--> <p v-for="(val,key) in obj">{{key}}:{{val}}</p> </div> </template> <script> export default { data () { return { list:[1,2,3,4,5,6], listObj:[ {id:1, name:'zs1'}, {id:2, name:'zs2'}, {id:3, name:'zs3'}, {id:4, name:'zs4'}, {id:5, name:'zs5'}, {id:6, name:'zs6'}, ], obj:{ id : 1, name : "CoderHqf", age : 20 } } } } </script> <style scoped> </style>
v-slot
#
,因为v-slot是新款,在使用时只能用于template里。具名插槽
作用域插槽
动态插槽名
<template v-slot:[dynamicSlotName]> ... </template>
[]
里填写的东西就是动态插槽名,里面可以写拼接的字符串、计算属性和方法,变化挺多的,但只会渲染出dynamicSlotName经过相应运算或方法处理的最终结果,很灵活。总结
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算