Vue 中指令v-bind动态绑定及与v-for结合使用详解

2024-07-31 06:32:49

前言：

在昨天的文章中已经基本介绍了，v-bind的基本使用，可以参考学习，本文是更加具体的解释v-bind的使用，和v-for结合的使用。

一、 v-bind动态绑定class

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

这里举简单例子来体现绑定效果，设置一个按钮可以控制对象里面元素的颜色，这时候对象就要绑定动态事件，才能实现变化。

有两种绑定的方法

一种直接在h5中直接绑定颜色变化，另一种是调用函数的方式绑定，需要注意，直接写就不需要this，但是在调用函数里面需要使用this才能实现。其中还要注意，变色的条件是自己设置了一个为false点击后取反出现，然后再取反，就会出现变色不变色的样式。

代码如下:

  <style>
    .active{
      color:red;
    }
  </style>
</head>
<body>
  <div id="app">
    <h3 class="title" :class="{active:isActive}">{{message}}</h3>
    <h3 class="title" :class="getClasses()">{{message}}</h3>
    <button @click="change">点击变色</button>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        active:"active",
        isActive:false
      },
      methods: {
        change(){
          this.isActive = !this.isActive
        },
        getClasses(){
          return {active:this.isActive}
        }
      },
    })
  </script>

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

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

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

 <div id="app">
    <!-- 加上单引号当成字符串 -->
    <h3 class="title" :class="['active','line']">{{message}}</h3>
    <!-- 不加会被当成变量 -->
    <h3 class="title" :class="[active,line]">{{message}}</h3>
    <h3 class="title" :class="getClasses()">{{message} {{getClasses()[1]}}</h3>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        active:"aaaa",
        line:'bbbb'
      },
      methods: {
        getClasses(){
          return [this.active,this.line]
        }
      },
    })
  </script>

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

<!-- <h3 :style="{key(属性名):value(属性值)}">{{message}}</h3> -->
<!-- 加单引号，当成字符串解析 -->
<h3 :style="{fontSize:'50px'}">{{message}}</h3>
<!-- 不加单引号，变量解析 -->
<h3 :style="{fontSize:fontSize}">{{message}}</h3>
<h3 :style="getClasses()">{{message}}</h3>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data(){
       return{ message:"你好啊",
        fontSize:50+'px'
     }
    },
      methods: {
        getClasses(){
         return {fontSize:this.fontSize}
        }
      },
    })
  </script>

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

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

二、v-bind和v-for的结合使用

实现了，点击字体会出现变色，前提是需要先通过v-for把数组内的内容全部都遍历出来，在通过绑定事件，来实现颜色的切换，其中需要注意，自己设置了一个当前的索引，通这个索引来判断当前的情况，从而发生颜色的变化，实现所需的结果。

<style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li :class="currentIndex==index?'active':''" @click="change(index)" v-for="(item,index) in list">{{index}}--{{item}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    currentIndex:0,
                    list:["小明","小红","小张","小李"],
                }
            },
            methods:{
                change(index){
                    this.currentIndex=index
                }
            }
        })
    </script>

以上就是Vue 中指令v-bind动态绑定及与v-for结合使用详解的详细内容，更多关于Vue 指令v-bind结合v-for的资料请关注我们其它相关文章！

带你理解vue中的v-bind

目录一.v-bind关键源码分析 1.v-bind化的属性统一存储在哪里:attrsMap与attrsList 2.解析HTML,解析出属性集合attrs,在start回调中返回 3.在start回调中创建ASTElement,createASTElement(... ,attrs, ...) 4.创建后ASTElement会生成attrsList和attrsMap 5.attrs的数据类型定义 6.绑定属性获取函数二.如何获取v-bind的值 1.v-bind:key源码分析 2.v-bi
Vue.js中v-bind指令的用法介绍

一.什么是v-bind指令 v-bind指令用于响应更新HTML特性,允许将一个或多个属性动态绑定到表达式.v-bind是应用在动态属性上面的. 二.语法 v-bind语法如下: v-bind:动态属性名称="变量" 也可以简写成下面的形式: :动态属性名称="变量" 代码示例如下: <img :src="imgUrl" :title="title" /> 这里的src和title都是<img>标签的属
详解vue中v-model和v-bind绑定数据的异同

vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data
vue指令 v-bind的使用和注意需要注意的点

目录 1.v-bind:可以为元素的属性绑定一些数据 2.v-bind:可以简写成 : 推荐直接写冒号 3.v-bind:指令表达式的拼接, 1.v-bind:可以为元素的属性绑定一些数据 <div id="app"> <p v-bind:title="message" v-bind:id="pId">我是p标签</p> </div> <script src="./js/vue.js
Vue中v-bind原理深入探究

目录前置内容解析模板总结前面我们分析了v-model的原理,接下来我们看看v-bind的实现又是怎样的呢? 前置内容 <template> <div> <test :propTest="a"></test> <div @click="changeA">点我</div> </div> </template> <script> import test fr
Vue项目中v-bind动态绑定src路径不成功问题及解决

目录 v-bind动态绑定src路径不成功解决方案 1 解决方案 2 解决方案 3 vue踩坑--动态v-for图片路径问题问题所在解决办法实现代码 v-bind动态绑定src路径不成功问题:在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示, 但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片不能显示. 解决方案 1 当在给数据MyimgSrc 设置绝对路径或者是相对路径时应该使用require引
vue实现用v-bind给src和href赋值

目录 v-bind给src和href赋值示例 v-bind:src无效问题附上代码 v-bind给src和href赋值用v-bind给src和href赋值其实很简单,即 v-bind:属性名="name",其中name就是data里json数据的键值,其简写形式为 :属性名="name". 示例 <div id="app"> <a v-bind:href="link" rel=&quo
Vue中使用方法、计算属性或观察者的方法实例详解

熟悉 Vue 的都知道方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&
vue中使用Echarts map图实现下钻至县级的思路详解

今天给大家分享echarts map地图下钻至县级,因为项目需求需要实现 map 图下钻至县级,也找了很多博客,但是基本都是同一篇博客. 好在最终还是实现了,先上动图: 基本思路都是一致的,获取鼠标点击的参数跳转至指定的 JSON 需要注意的是,因为我是直接从 vue-cli2 直接跳到 vue-cli4 ,还奇怪怎么读取不到JSON,查找后才知道 vue-cli3 往后的项目基础架构对比旧版本有些区别. 以前大家都习惯在根目录下的 static文件夹下创建 JSON 文件,vue-cli3.4
vue中使用element ui的弹窗与echarts之间的问题详解

今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就陷入疑惑,平时都是这样获取的,怎么今天就不行了呢,搜索了很多答案之后才知道,在刚进入页面的时候抽屉是关闭的,那echarts不进行获取dom,当点击抽屉出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数据: <el-drawer title="分析图表"
Vue 中指令v-bind动态绑定及与v-for结合使用详解

目录前言: 一. v-bind动态绑定class 1. v-bind动态绑定class(对象语法) 2. v-bind动态绑定class(数组用法) 3.v-bind动态绑定style(对象语法) 4.v-bind动态绑定style(数组语法) 二.v-bind和v-for的结合使用前言: 在昨天的文章中已经基本介绍了,v-bind的基本使用,可以参考学习,本文是更加具体的解释v-bind的使用,和v-for结合的使用. 一. v-bind动态绑定class 1. v-bind动态绑定cla
vue 中动态绑定class 和 style的方法代码详解

先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

1.如果只使用config配置的相关js接口可采用如下方式引入执行 npm weixin-sdk-js --save 局部引入在vue页面中 import wx from 'weixin-sdk-js'; 全局引入在vue 的main.js 页面中引入后编写到vue原型链上,然后全局调用 import wx from "weixin-sdk-js"; Vue.prototype.$wx = wx; 2.如果要使用agentConfig配置的相关接口一定不要执行npm命令引入
vue面试created中两次数据修改会触发几次页面更新详解

目录面试题: 一.同步的二.异步的三.附加总结面试题: created生命周期中两次修改数据,会触发几次页面更新? 一.同步的先举个简单的同步的例子: new Vue({ el: "#app", template: `<div> <div>{{count}}</div> </div>`, data() { return { count: 1, } }, created() { this.count = 2; this.coun
vue element实现将表格单行数据导出为excel格式流程详解

由于业务内容的需要,我们有时候需要将表格中的单行数据做导出,生成一个excel表格,以下操作主要实现将element中的table数据生成一个excel表格并做下载操作. 效果图如下: 点击单行导出按钮,导出数据为excel表格如下图: 具体操作步骤如下: 1.下载按照依赖 npm install -D script-loader 2.在src文件夹的目录下方创建两个js文件 (1):Blob.js (2):Export2Excel.js 如下图: (Blob.js) (function (v
jQuery中通过ajax调用webservice传递数组参数的问题实例详解

下面通过实例给大家说明比较直观些,更方便大家了解. 本人的项目中通过jquery.ajax调用webservice. 客户端代码如下: $.ajax({ url: "test/xxx.asmx", type: 'POST', dataType: 'xml', timeout: , data: { name: "zhangsan", tags: ["aa", "bb", "cc"] }, error: fun
JavaScript中的普通函数和箭头函数的区别和用法详解

最近被问到了一个问题: javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答-- 箭头函数中的 this 和调用时的上下文无关,而是取决于定义时的上下文这并不是很正确的答案--虽然也不是完全错误箭头函数中的 this 首先说我的回答中没有错误的部分:箭头函数中的 this 确实和调用时的上下文无关 function make () { return ()=>{ consol