深入理解Vue.js:常见指令解析与运用
一些常用的vue指令有:
1. v-text:内容以普通文本text显示
<div v-text="count"></div>等价于<div>{{count}}</div>
2. v-html: 内容以html显示
比如str值为:<span style="color:red;">测试</span> <div v-html="str"></div>
页面上会显示红色的测试二字
3.v-bind:用于绑定属性,比如 srcUrl值为:.../img/arrow.png
将上面srcUrl绑定到img标签上:
<img v-bind:src="srcUrl" /> 可以简写成: <img :src="srcUrl" />
可以动态绑定多个值:
data() { return { attrsbind: { title: '测试', id: 'imgId', src: '....' } } } <img v-bind="attrsbind" />
4. v-on: 用于绑定事件
比如在一个button上绑定点击事件:
<button v-on:click="str+'你好'">点击</button> 可以缩写成: <button @click="str+'你好'">点击</button>
可以绑定多个事件:
<div v-on="{click: func1, mouseover: func2}">...</div>
还可以在v-bind和v-on时设置动态参数,格式为:
<div v-bind:[attrName]="attrValue">...</div> <div v-on:[eventName]="func">...</div>
v-on下还可以使用.prevent,.stop等修饰符:
<div v-on:click.prevent="func">...</div>
上述v-on:click.prevent相当于对触发的事件调用event.preventDefault()阻止事件的默认行为。
<div v-on:click.stop="func">...</div>
上述v-on:click.stop相当于对触发的事件调用event.stopPropagation()阻止事件冒泡。
5. v-if、v-else-if、v-else: 根据条件判断是否渲染
<div v-if="color === 'red'">红色</div> <div v-else-if="color === 'blue'">蓝色</div> <div v-else>其它颜色</div>
6. v-show: 根据条件判断是否显示
<div v-show="color === 'red'">是红色哦</div>
跟v-if不同的是 v-show是不管显示和隐藏都是一直渲染在页面上的,不会从页面DOM中移除。
7. v-for: 循环
假设有个数组list,值为['red', 'green', 'pink', 'blue', 'orange']
<url> <li v-for="it in list" v-bind:key="it"> 颜色是: {{ it }} </li> </ul>
8. v-cloak:在vue实例结束编译前先隐藏标签展示,防止页面上出现{{xxx}}这种未被渲染的数据:
<div v-cloak>测试一下吧</div> <style> [v-cloak]{ display: none; } </style>
9. v-pre: 将{{xxx}}原样展示在页面上,不做替换处理:
<div v-pre>{{ test }}</div>
10. v-once: 只渲染一次,当一个组件中内容静态时可以考虑使用,使用后该组件只会渲染一次
<span v-once>{{color}}</span> // color不变 <span>{{color}}</span> // color随着input中输入内容改变而改变 <input type="text" v-model = "color">
Vue
网站开发
小程序开发
网站建设
阅读排行
-
1. 几行代码就能实现Html大转盘抽奖
大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。
查看详情 -
2. 浙江省同区域公司地址变更详细流程
提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)
查看详情 -
3. 微信支付商户申请接入流程
微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。
查看详情 -
4. 阿里云域名ICP网络备案流程
根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。
查看详情 -
5. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情