2021-01-13

kaka_d

于 2021-01-13 19:30:10 发布

阅读量175

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/kaka_d/article/details/112573328

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.v-show

2.v-if

在这里插入图片描述

3.v-bind

v-bind:属性名=表达式
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind指令</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .active{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
        :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
        :class="{active:isActive}" @click="toggleActive">
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"黑马程序员",
                isActive:false
            },
            methods:{
                toggleActive:function(){
                    this.isActive=!this.isActive;
                }
            },
        })
    
    </script>
 
</body>

在这里插入图片描述

4.图片切换

在这里插入图片描述

列表数据使用数组保存
v-bind指令可以设置元素属性如：src
v-show和v-if都可以切换元素的显示状态，频繁切换用v-show
5.v-for指令

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">

        <ul>
            <li v-for="(it,index) in arr">
                {{index+1}}黑马程序员：{{it}}
            </li>
        </ul>
        <h2 v-for="item in fruit" v-bind:title="item.name">
            {{item.name}}
        </h2>
    </div>
    <script src="vue.js"></script>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","广州","深圳"],
                fruit:[
                    {name:"apple"},
                    {name:"pear"}
                ]
            },
            methods:{
                add:function(){
                    this.fruit.push({name:"banana"});
                },
                remove:function(){
                    this.fruit.shift();
                }
            },
        })
    </script>
</body>

在这里插入图片描述
v-for指令：根据数据生成列表结构
数组经常和v-for结合使用
语法：（item，index）in 数据
item和index可以结合其他指令一起使用
6.v-on补充
传递自定义参数，事件修饰符
v-on:click的语法糖（简便写法）：@click

<body>
    <div id="app">
        <input type="button" value="点击" @click="doit(222,'老铁')">
        <input type="text" @keyup.enter="sayHi">//事件修饰符
    </div>
    <script>
        var app= new Vue({
            el:"#app",
            methods:{
                doit:function(p1,p2){
                    console.log("做it");
                    console.log(p1);
                    console.log(p2);

                },
                sayHi:function(){
                    alert("吃了没");
                },
            }
        })
    </script>
</body>

在这里插入图片描述
7.v-model指令

<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
    
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            },
            methods:{
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message="酷丁鱼";
                }
            },
        })
    </script>
</body>