首页 > 其他 > 详细

vue 指令的用法

时间:2018-06-08 21:28:57      阅读:206      评论:0      收藏:0      [点我收藏+]

  在vue中,指令是指带有v-前缀的vue属性。通过指令我们可以给标签设置一些制定的特性。

 

  1.  v-text 指令 

     类似js中的innertext设置标签内的文本元素

1 <!-- v-text innerText -->
2   <p v-text="message"></p>
3 <!-- 简写方式 -->
4   <p>{{message}}</p>

  

  2.  v-html 指令

      类似js中innerHTML,设置标签内的内容,内部的标签会被解析渲染出来

1 <!-- v-html  innerHTML -->
2   <p v-html="dom"></p>
  dom: ‘<mark>大家好</mark>‘

  

  3.  v-show 指令

      通过控制标签的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
            }
    })     

 

  4.  v-if 指令

       通过对标签的摧毁和重建来控制标签是否存在(摧毁的方法是对标签进行注释,使其不被渲染)

       值为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一般用于高频率的切换情景中

 

 

vue 指令的用法

原文:https://www.cnblogs.com/shiluanwu/p/9157492.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!