vue指令系统

阅读目录

1. v-if 指令
2. 二、v-show
3. 三、v-bind
4. 三事件处理
   • 监听事件
   • v-on:click 简写成@click
   • 四、个数组列表的v-for

 

---

所谓指令系统，大家可以联想咱们的cmd命令行工具，只要我输入一条正确的指令，系统就开始干活了。

在vue中，指令系统，设置一些命令之后，来操作我们的数据属性，并展示到我们的DOM上。

OK，接下来我们一一介绍我们的指令系统的用法。

 

回到顶部

v-if 指令

<div id="app">
<h2 v-if="show"> haha</h2>

</div>

<script>
 var app = new Vue({
        el:'#app',
        //所有的数据都放在数据属性里
        data:{
            show:true,},
created(){
//初始化数据
},
//方法:
methods:{
}

注意：show变量，是数据属性中存储的值。要么真(true)要么假(false)。该属性值为true的时候，p标签显示，反之则不显示。

 

也可以添加一个v-else块。

<divv-if = 'show'>显示</div>
<divv-else>隐藏</div>

另外还有v-else-if块:

<div v-if="type === 'thunder'
>
  打雷
</div>
<div v-else-if="type === 'rain'>
  下雨
</div>

<div v-else>
  雷阵雨
</div>

回到顶部

二、v-show

也是根据条件来展示元素的，和v-if的功能类似，如果v-show的条件为False，所在的标签还是生成了代码，只是没有进行显示而已，而v-if 如果条件为false，就直接不生成代码，两者之间有本质的区别。适用于频繁的切换

<p v-show='ok'>网站导航</p>

如果ok数据属性值为false。

 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display

注意：v-show不支持v-else块

 

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 

回到顶部

三、v-bind

我们在js中常用操作dom的css样式属性的方法有很多，在vue中可以直接使用v-bind:class来给每个标签元素添加class。

如下所示

使用了简写的形式. <div v-bind:class=" "> 等同于<div :class=" ">

大括号里面的key是class属性,value是数据属性,如果为true的话 box2就会被渲染的class里

<div class="box" :class="{box2:isRed}"></div>

data:

data:{
  isRed:true,}

结合css代码可以显示想要的内容

 

回到顶部

三事件处理

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

1 <div id='app'>
2     <button v-on:click = 'count+=1'>加{{count}}</button>
3     <p>点了{{count}}次</p>
4 </div>

1 var app = new Vue({
2     el:'#app',
3     data:{
4        count:0 
5     } 
6 })

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称

v-on:click 简写成@click

1 <div id='app'>
2     <button @click = 'countClick'>加{{count}}</button>
3     <p>点了{{count}}次</p>
4 </div>

 var app = new Vue({
   el:'#app',
    data:{
       count:0 
    },
    methods:{
       countClick(){
           this.count+=1;
       }
    }
 })    

 

四、个数组列表的v-for

<ul>
    <li v-for="(item,index) in ImgAttr" ">{{index+1}}</li>
</ul>

data:{

ImgAttr:[
                {id:1,src:'./1.jpg'},
                {id:2,src:'./2.jpg'},
                {id:3,src:'./3.jpg'},
                {id:4,src:'./4.jpg'}
            ],
}

可以有index索引

初始值为0