Vue中动态绑定属性

1. v-bind的基本使用

某些时候我们并不想将变量放在标签内容中，像这样

`{{message}}`

是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样，而且这里也不能使用Mustache语法，类似，这也是错误的。


html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-bind的基本使用title>
head>
<body>
  <div id="app">
    
    
    
    <img v-bind:src="imgURL" alt="">
    <a v-bind:href="aHerf">a>
    
    <img :src="imgURL" alt="">
    <a :href="aHerf">a>
 
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        imgURL:"https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1",
        aHerf:"http://www.baidu.com"
      }
    })
  script>
body>
html>


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.active {
				color: #FF0000;
			}
		style>
	head>
	<body>
		<div id="app">
		  
			<ul>
			   <li v-for="(item, index) in movies" :key="index" :class="index === currentIndex ? 'active' : ''" @click="change(index)">{{index+"---"+item}}li>
			 ul>
		div>	
		 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
		  <script>
		    const app = new Vue({
		      el:"#app",
		      data:{
				  currentIndex:0,
				  movies:[
					  "海王","海贼王","火影忍者","复仇者联盟"
				  ]
			  },
			  methods:{
				  change(index){
					  this.currentIndex = index
				  }
			  }
			  })
		  script>
	body>
html>

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

2. v-bind动态绑定class

2.1.v-bind动态绑定class(字符串写法)

字符串写法，适用于:样式的类名不确定，需要动态指定


  <div id="app">
         <h2 :class="mood">{{name}}h2>
    div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    name:'张三',
                    mood:'active',
 
                }
            },
          
        })

2.2. v-bind动态绑定class(对象写法)

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


html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-bind动态绑定class(对象语法)title>
  <style>
    .active{
      color:red;
    }
  style>
head>
<body>
  <div id="app">
    
 
    
    
    <h2 class="title" :class="{active:isActive}">{{message}}h2>
    <h2 class="title" :class="getClasses()">{{message}}h2>
    <button @click="change">点击变色button>
 
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        active:"active",
        isActive:true
      },
      methods: {
        change(){
          this.isActive = !this.isActive
        },
        getClasses(){
          return {active:this.isActive}
        }
      },
    })
  script>
body>
html>

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

对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用


<div id="app">
         <h2 :class="classobj">{{name}}h2>
    div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    name:'张三',
                    classobj:{
                        active:false,
                        active1:false,
                        active2:false,
                        active3:false,
                    }
 
                }
            },
          
        })

2.3. v-bind动态绑定class(数组用法)

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


html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-bind动态绑定class(数组用法)title>
  <style>
  style>
head>
<body>
  <div id="app">
    
    <h2 class="title" :class="['active','line']">{{message}}h2>
    
    <h2 class="title" :class="[active,line]">{{message}}h2>
    <h2 class="title" :class="getClasses()">{{message}}h2>
 
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        active:"aaaa",
        line:'bbbb'
      },
      methods: {
 
        getClasses(){
          return [this.active,this.line]
        }
      },
    })
  script>
body>
html>

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

数组写法，适用于:要绑定的样式个数不确定、名字也不确定


  <div id="app">
         <h2 :class="classarr">{{name}}h2>
    div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    name:'张三',
                 classarr:['active1','active2','active3']
 
                }
            },
          
        })
    script>

3. v-for和v-bind结合

使用v-for和v-bind实现一个小demo，将电影列表展示，并点击某一个电影列表时候，将此电影列表变成红色。


html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>作业(v-for和v-bind的结合)title>
  <style>
    .active{
      color:red;
    }
  style>
head>
<body>
  <div id="app">
 
    <ul>
      <li v-for="(item, index) in movies" :key="index" :class="{active:index===currentIndex}" @click="changeColor(index)" >{{index+"---"+item}}li>
    ul>
 
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        currentIndex:0,
        movies:["海王","海贼王","火影忍者","复仇者联盟"]
      },
      methods: {
        changeColor(index){
          this.currentIndex = index
        }
      },
    })
  script>
body>
html>

4. v-bind动态绑定style

4.1 v-bind动态绑定style(对象语法)


<h2 :style="{fontSize:'50px'}">{{message}}h2>
<h2 :style="{fontSize:fontSize}">{{message}}h2>
<h2 :style="getStyle()">{{message}}h2>

4.2 v-bind动态绑定style(数组语法)


  <div id="app">
    <h2 :style="[baseStyle]">{{message}}h2>
    <h2 :style="getStyle()">{{message}}h2>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        baseStyle:{backgroundColor:'red'}
      },
      methods: {
        getStyle(){
          return [this.baseStyle]
        }
      },
    })
  script>

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

相关阅读:
光伏系统MPPT、恒功率控制切换Simulink仿真
 2020华数杯全国大学生数学建模竞赛B题-工业零件切割优化方案设计（一）
自定义结构体的json序列化
 Webpack关闭SourceMap
nvm的安装、使用及常见问题汇总
 TiDB Lightning Web 界面
 宠物寄养小程序实战教程（上篇）
JAVA集合框架工具类自定义Collections集合方法
 Playcanvas后处理-辉光bloom
C# Winform应用程序简介
原文地址：https://blog.csdn.net/helongzhi/article/details/126007180