Vue学习笔记(二)

最新推荐文章于 2024-05-30 13:09:09 发布

小邓冲!

最新推荐文章于 2024-05-30 13:09:09 发布

阅读量127

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43363188/article/details/113107783

版权

四. 动态绑定属性

4.1 v-bind的基本使用

某些时候我们并不想将变量放在标签内容中，像这样<h2>{{name}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量url写在如下位置，想这样<img src="url" alt="">导入图片是希望动态获取图片的链接，此时的url并非变量而是字符串url，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:src="url" alt="">，而且这里也不能使用Mustache语法，类似<img v-bind:src="{{url}}" alt="">，这也是错误的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
	<!--在v-bind里不能使用{{Mustache}}语法-->
	<!--<img v-bind:src="{{url}}" alt=""> -->
	<!--v-bind的正确用法    -->
    <img v-bind:src="url" alt="">
    <!--v-bind语法糖：    -->
    <a :href="aurl">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
    let app =new Vue({
      el:'#app',
      data:{
        name:'呈现',
        message:function (){
          console.log('xxx');
        },
        url:'https://exp-picture.cdn.bcebos.com/edd84743040148fe988051df8fd149299b88021a.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1',
        aurl:'http://www.baidu.com'
      },
      methods:{}
    })
</script>
</body>
</html>

此时vue对象中定义的urlL变量和aurl变量可以动态的绑定到img标签的src属性和a标签的href属性。v-bind:由于用的很多，vue对他有一个语法糖的优化写法也就是:，此时修改imgURL变量图片叶重新加载。

4.2 v-bind动态绑定class(对象语法)

有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上class="active"，当Dom元素有次class时候，变红<style>.active{color:red;}</style>，在写一个按钮绑定事件，点击变黑色，再次点击变红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
<!--对象语法-->
<div id="app">
    <h2 v-bind:class="{active:isActive}">{{name}}</h2>
    <button @click="clicked">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
    let app =new Vue({
      el:'#app',
      data:{
        name:'呈现',
        message:function (){
          console.log('xxx');
        },
        isActive:false,
      },
      methods:{
        clicked:function(){
          this.isActive = !this.isActive;
        }
      }
    })
</script>
</body>
</html>

定义两个变量active和isActive，在Dom元素中使用:class={active:isActive}，此时绑定的class='active'，isActive为true，active显示，定义方法change()绑定在按钮上，点击按钮this.isActive = !this.isActive，控制Dom元素是否有class='active'的属性。

4.3 v-bind动态绑定class(数组语法)

class属性中可以放数组，会依次解析成对应的class。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;
        }
        .line{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 :class="['active','line']">数组</h2>
    <h2 :class="getSome()">数组</h2>

</div>
<script src="../js/vue.js"></script>
<script>
    let app =new Vue({
      el:'#app',
      data:{
        name:'呈现',
        message:function (){
          console.log('xxx');
        },
        isActive:'active',
        isLine:'line'
      },
      methods:{
        getSome:function () {
          return [this.isActive,this.isLine];
        }
      }
    })
</script>
</body>
</html>

加上单引号的表示字符串
不加的会当成变量
可以直接使用方法返回数组对象

代码实现效果：
在这里插入图片描述

4.4 v-bind动态绑定style

类似绑定class，绑定style也是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2 :style="getStyle()">{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    let app =new Vue({
      el:'#app',
      data:{
        name:'呈现',
        message:function (){
          console.log('xxx');
        },
        finalColor:'red',
        finalSize:100
      },
      methods:{
        getStyle:function(){
          return {backgroundColor:this.finalColor,fontSize:this.finalSize+'px'}
        }
      }
    })
</script>
</body>
</html>

4.5 v-bind与v-for的结合使用(作业)

实现当用户点击某一个li，被点击的li变红色(排他法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		.active{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li @click="clicked(index)" :class="{active:isActive==index}" v-for="(m,index) in movie">{{index}}-{{m}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    let app =new Vue({
      el:'#app',
      data:{
        name:'呈现',
        message:function (){
          console.log('xxx');
        },
        movie:['海泽旺','名侦探','阿拉丁','神灯'],
        isActive:0
      },
      methods:{
        clicked:function (index) {
          this.isActive = index;
        }
      }
    })
</script>
</body>
</html>

效果图：
在这里插入图片描述

小邓冲!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记(二)

四. 动态绑定属性4.1 v-bind的基本使用某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量url写在如下位置，想这样<img src="url" alt="">导入图片是希望动态获取图片的链接，此时的url并非变量而是字符串url，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:src="url" alt=""
复制链接

扫一扫