标签:als 文本 app iss message hid 方法 show OLE
在vue中,指令是指带有v-前缀的vue属性。通过指令我们可以给标签设置一些制定的特性。
类似js中的innertext设置标签内的文本元素
1 <!-- v-text innerText --> 2 <p v-text="message"></p> 3 <!-- 简写方式 --> 4 <p>{{message}}</p>
类似js中innerHTML,设置标签内的内容,内部的标签会被解析渲染出来
1 <!-- v-html innerHTML --> 2 <p v-html="dom"></p>
dom: ‘<mark>大家好</mark>‘
通过控制标签的display值来实现显示和隐藏
值为Boolean类型,也可以是表达式
true为显示,false为隐藏
<div v-show="isShow"> 我是显示的 </div> <i v-show="isHide">我隐藏了</i> <script> var vm = new Vue({ el: ‘#app‘, data: { isShow:true; isHide:false } })
通过对标签的摧毁和重建来控制标签是否存在(摧毁的方法是对标签进行注释,使其不被渲染)
值为Boolean类型,也可以是表达式
true为显示,false为隐藏
1 <!-- v-if 通过控制标签是否在文档中来控制标签是否展示 --> 2 <div class="box" v-if="isShow"> 3 显示 4 </div> 5 <div class="box" v-if="isHide"> 6 隐藏 7 </div> 8 <script> 9 var vm = new Vue({ 10 el: ‘#app‘, 11 data: { 12 isShow: true, 13 isHide: false 14 }
v-if可以与v-eles-if 、v-eles 配合使用,达到判断的效果,同js的if else语句
同样的v-show语句也运用于元素的相互切换
☆v-if 一般用于切换频率低的情况中,v-show一般用于高频率的切换情景中
标签:als 文本 app iss message hid 方法 show OLE
原文地址:https://www.cnblogs.com/shiluanwu/p/9157492.html