三、动态绑定属性

最新推荐文章于 2024-05-06 16:45:12 发布

不会Java怎么找女朋友

最新推荐文章于 2024-05-06 16:45:12 发布

阅读量225

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/lin_willen/article/details/112131023

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

01-v-bind的基本使用

1.1v-bind

1、除了内容需要动态来决定外，某些属性我们也希望动态来绑定

比如动态绑定a元素的href属性
比如动态绑定img元素的src属性

2、这个时候，我们可以使用v-bind指令：

作用：动态绑定属性
缩写：语法糖：（简写）
预期：any(with argument) | Object（without argument）
参数：attrOrProp（optional）

1.2代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-v-bind的基本使用</title>
</head>
<body>

<div id="app">
  <!--错误的用法,这里不可以用mustache语法-->
  <!--<img src="{{imgURL}}}" alt="">-->
  <!--正确用法-->
  <img v-bind:src="imgURL" alt="">
  <!--  语法糖，动态绑定简写-->
  <img :src="imgURL" alt="">
  <a :href="baiduURL">百度一下</a>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      imgURL: 'https://huyaimg.msstatic.com/cdnimage/gamebanner/phpaicNpn1595239718.jpg',
      baiduURL: 'http://www.baidu.com'
    }
  })
</script>
</body>
</html>

1.3运行结果

在这里插入图片描述

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

2.1v-bind绑定class

1、绑定方式：对象语法

对象语法的含义是：class后面跟的是一个对象

2、用法

通过判断，显示或隐藏传入的类
普通的类同时存在，并不会覆盖，而是合并
如果过于复杂，可以放在一个methods或者computed中

2.2代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-bind动态绑定class(对象语法)</title>
  <style>
    .active{
      color: red;
    }
    .family{
      font-family: 新宋体;
    }
    .size{
      font-size: 30px;
    }
  </style>
</head>
<body>

<div id="app">
  <!--:class的值可以放一个对象-->
  <!--<h2 :class="{类名1: boolean,类名2: boolean}">{{message}}</h2>-->
  <h2 class="size" :class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClickActive">切换颜色</button>
  <button v-on:click="btnClickFamily">切换字体</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      isActive: true,
      isFamily: true
    },
    methods:{
      btnClickActive:function () {
        this.isActive = !this.isActive;
      },
      btnClickFamily:function () {
        this.isFamily = !this.isFamily;
      },
      getClasses:function () {
        return {active: this.isActive,family: this.isFamily};
      }
    }
  })
</script>
</body>
</html>

2.3运行结果

在这里插入图片描述

03-点击列表更改字体颜色

3.1案例需求

问题：点击列表中的哪一项，那么该项的文字就变成红色
说明：Vue中v-for,v-bind（：）,v-on（@）的综合使用

3.2代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-点击列表更改字体颜色</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="(movie,index) in movies" :class="{active:isActive === index}" v-on:click="liClick(index)">{{movie}}</li>
  </ul>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      movies: ['蜘蛛侠','钢铁侠','绿巨人','蝙蝠侠'],
      isActive:-1
    },
    methods: {
      liClick:function (index) {
        this.isActive = index;
      }
    }
  })
</script>
</body>
</html>

3.3运行结果

在这里插入图片描述

04-v-bind动态绑定style

4.1代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-v-bind动态绑定style</title>
</head>
<body>

<div id="app">
  <h2 :style="getStyles()">{{message}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      finalSize:100,
      finalColor:"red",
      finalBackgroundColor:"pink"
    },
    methods:{
      getStyles(){
        return {fontSize:this.finalSize+'px',color:this.finalColor,background:this.finalBackgroundColor}
      }
    }
  })
</script>
</body>
</html>