关于Vue的一些小笔记(二)条件判断、循环语句、图片切换

前言:这篇主要记下Vue的条件与循环语句,语法类似于c语言,比较好理解。另外加一个小例子。

一、条件判断

1、v-if

在元素和template中使用v-if指令

<div id="app">
    <p v-if="seen">我爱学习p>
    <template v-if="look">
        <h1>好好学习h1>
        <p>天天向上p>
    template>
div>
<scrtpt>
    new Vue({
    	el:"#app",
    	data:{
    		seen:true,
    		look:true
    }
})
scrtpt>

在字符串模板中,如Handlebars,写下面这样的模板块


{{#if ok}}
	<h1>yesh1>
{{/if}}

2、v-else

可以用v-else指令给v-if添加一个"else"块,v-else要跟在v-if 或 v-else-if的后面。

<div id="app">
    <div v-if="Math.random()>0.5">我爱学习div>
    <div v-else>
       我不爱学习
    div>
div>
<scrtpt>
    new Vue({
    	el:"#app"
})
scrtpt>

3、v-else-if

跟在v-if后面,它的后面可跟v-else。

<div id="app">
    <div v-if="type==='A'">我爱学习div>
    
Bdiv> <div v-else> 不是A、B div> div> <scrtpt> new Vue({ el:"#app", data:{ type:'C' } }) scrtpt>

二、循环语句

循环使用 v-for 指令。v-for指令需要以 site in sites 形式的特殊语法,***sites***是源数据数组,***site***是数组元素迭代的别名。

1、v-for可以绑定数据到数组来渲染一个列表:

<div id="app">
    <ol>
        <li v-for="site in sites">
            {{site.name}}
        li>
    ol>
div>
<scrtpt>
    new Vue({
    	el:"#app",
    	data:{
    		sites:[
    			{name:'小明'},
    			{name:'小花'},
    			{name:'小兰'}
    	]
    }
})
scrtpt>

运行结果为:

1、小明	
2、小花
3、小兰

2、模板中使用v-for

<ul>
    <template v-for="site in sites">
        <li>{{site.name}}li>
        <li>-------------li>
    template>
ul>

3、v-for迭代对象

(1) v-for可以通过一个对象的属性来迭代数据:

<div  id="app">
    <ul>
        <li v-for="value in object">
            {{value}}
        li>
    ul>
div>
<script>
new Vue({
    el:"#app",
    data:{
        object:{
            name:'李华',
            age:'12',
            work:'学生'
        }
    }
})
script>

也可以多加一个参数(第二个参数)作为键名:

<div  id="app">
    <ul>
        <li v-for="(value,key) in object">
            {{key}}:{{value}}
        li>
    ul>
div>

第三个参数为索引:

<div  id="app">
    <ul>
        <li v-for="(value,key,index) in object">
            {{index}}.{{key}}:{{value}}
        li>
    ul>
div>

(2)循环整数

<div  id="app">
    <ul>
        <li v-for="n in 10">
            {{n}}
        li>
    ul>
div>

三、一个小例子----用vue实现图片切换

<body>
    <div id="app">
        <div class="img">
            
            <img :src="imgArr[index]" alt="">
            
            <a href="javascript:void(0)" @click="prev" v-show="index!=0" class="left">
                <img src="./image/prev.jpg" alt="">
            a>
            
            <a href="javascript:void(0)" @click="next" v-show="index" class="right">
                <img src="./image/next.jpg" alt="">
            a>
        div>
    div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                imgArr:[
                    "./image/1.jpg",
                    "./image/2.jpg",
                    "./image/3.jpg",
                    "./image/4.jpg",
                    "./image/5.jpg",
                    "./image/6.jpg",
                    "./image/7.jpg",
                    "./image/8.jpg",
                    "./image/9.jpg",
                    "./image/10.jpg",
                ],
                index:0
            },
            methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            }
        })
    script>
body>
实现步骤:

(1)定义图片数组(图片的路径,列表数据使用数组保存)

(2)添加图片索引(定义index)

(3)绑定src属性(使用v-bind指令来设置属性)

(4)图片切换的逻辑(index–/index++)

(5)显示状态切换(第一张时隐藏上一张按钮,最后一张时隐藏下一张按钮。用v-show来实现隐藏:因为切换频繁。)

效果如下:

第一张时:
关于Vue的一些小笔记(二)条件判断、循环语句、图片切换_第1张图片

中间的图片:
关于Vue的一些小笔记(二)条件判断、循环语句、图片切换_第2张图片

最后一张图片:
关于Vue的一些小笔记(二)条件判断、循环语句、图片切换_第3张图片

你可能感兴趣的:(前端,vue.js,vue.js,html5,javascript)