阿菜的Vue学习之旅（四）

kokunka

已于 2022-02-25 22:37:22 修改

阅读量259

点赞数

分类专栏： Vue 文章标签： vue.js 学习 javascript

于 2022-02-17 20:06:43 首次发布

本文链接：https://blog.csdn.net/kokunka/article/details/122802097

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

阿菜的Vue学习之旅（四）

1.v-bind指令的使用

index.html

 <div id="myPet">
        <!--v-bind指令，能够获取从数据库中传递的动态数据，在这里它通过vue实例中的data绑定元素中的src、herf-->
        <img v-bind:src="catSrc" alt="cat"/>
        <img v-bind:src="dogSrc" alt="dog"/>
        <a v-bind:href="url01">大嘴狗宠物店</a>
        <br/>
         <!--可以使用语法糖，用:代替v-bind:-->
        <img :src="catSrc" alt="cat"/>
        <img :src="dogSrc" alt="dog"/>
        <a :href="url01">大嘴狗宠物店</a>
    </div>

  <script src="../js/vue.js"></script>
  <script src="../js/demo.js"></script>

demo.js

let myPet = new Vue({
    el: '#myPet',
    data: {
        catSrc: 'https://img11.360buyimg.com/ceco/s600x600_jfs/t1/192041/40/866/77176/608d0eedE7fc85c25/d7ffe51b83a86211.jpg!q70.jpg',
        dogSrc: 'https://img13.360buyimg.com/ceco/s600x600_jfs/t1/162015/32/20983/100165/60868c68Ecec19e43/f504bebf3ed6dbe9.jpg!q70.jpg',
        url01: 'http://www.bmd520.com/'
    }
})

运行结果：
在这里插入图片描述

2.v-bind指令动态绑定class（对象语法）

index.html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">@import "../css/render.css";</style>
</head>
<body>
    <div id="myBtn">
        <h2>请问斋藤飞鸟是你的女神吗？</h2>
        <img  id="myImg" :src="myUrl" alt="myGoddess"/><br/><br/>
        <!--:class="{key01: boolean, key02: boolean}"，当key01为true时，class="key01"，然后显示class为key01的css样式。同样的，当key02为true时,界面也会显示key02的css样式。-->
        <button :class="{btn01: isBtn01, btn02: isBtn02}" v-on:click="myClick" ref="#">YES</button>
    </div>

    <script src="../js/vue.js"></script>
    <script src="../js/demo.js"></script>
    </body>

render.css

#myImg{
    width: 50em;
    height: 30em;
}
.btn01 {
    box-shadow: 0 1px 0 0 #fff6af;
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color:#ffec64;
    border-radius:6px;
    border:1px solid #ffaa22;
    display:inline-block;
    cursor:pointer;
    color:#333333;
    font-family: Arial, serif;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:01px 0 #ffee66;
}
.btn01:hover {
    background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    background-color:#ffab23;
}
.btn01:active {
    position:relative;
    top:1px;
}

.btn02 {
    box-shadow:inset 0 1px 0 0 #dcecfb;
    background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
    background-color:#bddbfa;
    border-radius:6px;
    border:1px solid #84bbf3;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family: Arial, serif;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0 1px 0 #528ecc;
}
.btn02:hover {
    background:linear-gradient(to bottom, #80b5ea 5%, #bddbfa 100%);
    background-color:#80b5ea;
}
.btn02:active {
    position:relative;
    top:1px;
}

demo.js

let myBtn = new Vue({
    el: '#myBtn',
    data:{
        url01: 'https://img2.baidu.com/it/u=3469048138,2470937702&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        url02: 'https://img2.baidu.com/it/u=3024324849,2907534436&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
        isBtn01: true,
        isBtn02: false,
        myUrl: this.url01,
        counter: 0
    },
    methods:{
        myClick: function(){
            this.isBtn01 = !this.isBtn01;
            this.isBtn02 = !this.isBtn02;
            if (this.counter === 0){
                this.myUrl = this.url02;
                this.counter ++;
            }else{
                this.myUrl = this.url01;
                this.counter --;
            }
        }
    }
})

运行结果：

点击按钮之前，图片和按钮的样式是这样的，this.isBtn01 = true;
this.isBtn02 = false; this.myUrl = this.url01
在这里插入图片描述
点击按钮之后，图片和按钮的样式更改了,this.isBtn01 = flase;
this.isBtn02 = true; this.myUrl = this.url02

在这里插入图片描述

再次点击按钮，图片和按钮的样式恢复原样 ,this.isBtn01 = true;
this.isBtn02 = false; this.myUrl = this.url01
在这里插入图片描述
注意
我们也可以使用使用getclasses（）方法，
html文件 :

 <button :class="{btn01: isBtn01, btn02: isBtn02}" v-on:click="myClick" ref="#">YES</button>
        <!--如果觉得麻烦，可以使用getClasses()方法，将{btn01: isBtn01, btn02: isBtn02}作为该方法的return值，其效果和上面的一样。-->
 <button :class="getClasses()" v-on:click="myClick" ref="#">YES</button>

js文件

methods:{
        myClick: function(){
            this.isBtn01 = !this.isBtn01;
            this.isBtn02 = !this.isBtn02;
            if (this.counter === 0){
                this.myUrl = this.url02;
                this.counter ++;
            }else{
                this.myUrl = this.url01;
                this.counter --;
            }
        },
        getClasses: function (){
            return {btn01: this.isBtn01, btn02: this.isBtn02}
        }
    }

使用:class="getClasses()“的运行效果和使用:class=”{btn01: isBtn01, btn02: isBtn02}"的运行效果是一样的
在这里插入图片描述

3.v-bind指令动态绑定class（数组语法）

4.v-bind指令动态绑定style（对象语法）

index.html

  <div class="myGoddess">
      <!--格式：
              v-bind:style{css属性名A: css属性值A, css属性名B: css属性值B, ...}
              （格式二）:style{css属性名A: css属性值A, css属性名B: css属性值B, ...
              其中属性值可以是vue内部data的变量，也可以直接是属性值
     -->
      <h2 :style={color:myColor,border:myBorder}>斋藤飞鸟</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script src="../js/demo.js"></script>

demo.js

 const myGoddess = new Vue({
    el: '.myGoddess',
    data: {
        myColor: '#80b5ea',
        myBorder: '2px solid yellow'
    }
})

运行结果：
在这里插入图片描述
—————————————————————————— —

上一篇
阿菜的Vue学习之旅（三）
下一篇
阿菜的Vue学习之旅（五）

kokunka

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阿菜的Vue学习之旅（四）

阿菜的Vue学习之旅（四） 1.v-bind指令的使用2.v-bind指令动态绑定class（对象语法）3.v-bind指令动态绑定class（数组语法）4.v-bind指令动态绑定style（对象语法）1.v-bind指令的使用index.html <div id="myPet">  <img v-bind:sr
复制链接

扫一扫