vue 指令的用法

Posted 2020-11-14 shiluanwu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 指令的用法相关的知识，希望对你有一定的参考价值。

　　在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             }