VUE_03_样式绑定和v-for的简单介绍

最新推荐文章于 2023-06-28 15:00:19 发布
最新推荐文章于 2023-06-28 15:00:19 发布
阅读量288 收藏
点赞数
分类专栏： vue相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oracle8090/article/details/106560452
版权

目录

 <:class>

<:style>

for循环使用

       普通数组 

对象数组

循环对象

迭代数字

v-for 中key属性的使用

 <:class>

<!DOCTYPE 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>Document</title>
  <script src="../lib/vue.js"></script>
  <style>
    .red {
      color: red;
    }

    .thin {
      font-weight: 200;
    }

    .italic {
      font-style: italic;
    }

    .active {
      letter-spacing: 0.5em;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1 class="red thin">1.这是一个很大很大的H1</h1>

    <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 -->
    <!-- 写上单引号 找class,如果不写引号会在vm对象中查找 -->
    <h1 :class="['thin', 'italic']">2.这是一个很大很大的H1</h1>

    <!-- 在数组中使用三元表达式 -->
    <h1 :class="['thin', 'italic', flag?'active':'']">3.这是一个很大很大的H1</h1>

    <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
    <h1 :class="['thin', 'italic', {'active':flag} ]">4.这是一个很大很大的H1</h1>

    <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->
    <h1 :class="classObj">5.这是一个很大很大的H1</h1>


  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        classObj: { red: true, thin: true, italic: false, active: false }
      },
      methods: {}
    });
  </script>
</body>

</html>

<:style>

<!DOCTYPE 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>Document</title>
  <script src="../lib/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 对象就是无序键值对的集合 -->
    <h1 :style="styleObj1">1.这是一个h1</h1>
    <!-- 指定一个数组 -->
    <h1 :style="[ styleObj1, styleObj2 ]">2.这是一个h1</h1>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj1: { color: 'red', 'font-weight': 200 },//带-号的属性必须带引号
        styleObj2: { 'font-style': 'italic' }
      },
      methods: {}
    });
  </script>
</body>

</html>

<v-for> for循环使用

普通数组 

<!DOCTYPE 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>Document</title>
  <script src="../lib/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- <p>{{list[0]}}</p>
    <p>{{list[1]}}</p>
    <p>{{list[2]}}</p>
    <p>{{list[3]}}</p>
    <p>{{list[4]}}</p> -->

    <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>

  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3, 4, 5, 6]
      },
      methods: {}
    });
  </script>
</body>

</html>

对象数组

<!DOCTYPE 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>Document</title>
  <script src="../lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },
      methods: {}
    });
  </script>
</body>

</html>

循环对象

<!DOCTYPE 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>Document</title>
  <script src="../lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  -->
    <p v-for="(val, key, i) in user">键是： {{ key }} -------   值是： {{ val }} ------   索引：{{ i }}</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        user: {
          id: 1,
          name: '托尼·屎大颗',
          gender: '男'
        }
      },
      methods: {}
    });
  </script>
</body>

</html>

迭代数字

v-for 中key属性的使用

<!DOCTYPE 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>Document</title>
  <script src="../lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">

    <div>
      <label>Id:
        <input type="text" v-model="id">
      </label>

      <label>Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>

    <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
    <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
    <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
    <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '嬴政' },
          { id: 3, name: '赵高' },
          { id: 4, name: '韩非' },
          { id: 5, name: '荀子' }
        ]
      },
      methods: {
        add() { // 添加方法
          this.list.unshift({ id: this.id, name: this.name })//在头部追加
          //this.list.push({ id: this.id, name: this.name }) 在后面追加

        }
      }
    });
  </script>
</body>

</html>

小朋友,你是否有很多问号?
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中v-for循环选中点击的元素并对该元素添加样式
weixin_42371145的博客
01-12 1539
v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化 解决方法：使用index索引，当点击一个元素时，将该元素的index索引赋给类样式的启用变量，如果该变量和index相等时，则启用该类样式 <template> <view> <view v-for="(item,index) in items" :
VUE专题 V-for 循环style（样式）的方式尝试与总结
weixin_44131922的博客
05-02 1836
标签中 这里下面的红线是因为缺失了:key 做区分的原因，可以后来补上，这里演示暂不处理 对应数据 methods中的方法 说明 这里是为了循环颜色这一属性，通过第二部分中对应数据传入的值不同，在方法中拼接传入不同的值并直接在方法中返回样式的值。 ...
vue v-for 循环中 绑定 style 传递参数 方法 在computed 中使用
weixin_44168929的博客
06-28 1182
常常遇到动态获取数据后，多种样式来判断字体的颜色，可以使用绑定style或者class，如 :style=“{ color: textColor, fontSize: item.fontSize + ‘px’ }” , :class=“Bclass(item)” 等 多种方法，所以在此记录一下。但是有的时候我想简洁代码，需要在style 或者class 中 传递 item 的参数。
Vue 在for循环中动态添加类名及style样式集合
Shivy_的博客
02-23 5036
Vue 在for循环中动态添加类名及style样式集合
work-notes（6）：vue中 v-for，class 和 style 中绑定带入变量的写法，如何在style中加入变量？
jinzai9976的博客
04-14 1331
时间：2022-0x-xx 文章目录原因解释解决办法 原因解释 在 v-for 写入到 style 或 class，特别是绑定的 :style、:class 就不生效 解决办法 在 {} 内用 [] 括起变量 <div v-for="item in videoList" :key="item.index"> <live_video :class="{[item.itemKey]: !isExpand,}"> </live_video> </div&
vue2 v-for ,虚拟dom ，diff算法，动态class，动态style
Cxil的博客
11-24 1620
概念：.vue 中的template里面写的标签，都是模版，要被vue处理成虚拟dom对象，才会渲染现实到真实Dom页面上。介绍：内存生成一样的虚拟Dom结构 本质是个js 对象因为真实的dom属性好几百个，没办法快速的知道哪一个属性改变了。比如template 里面的标签结构对应的虚拟dom 结构以后vue数据更新，生成新的虚拟dom结构 和 旧的 dom结构 对比 利用diff算法，找不同，只更新变化的部分（重绘/回流）到页面。也叫打补丁。
vue:使用v-for写入:style中图片做背景
webfullstack的博客
09-30 7576
&lt;div class="honor_row" v-for="(item,i) in points.awardList" :key='i'&gt; &lt;span class="radius200 " :style="{'background': 'url('+imgDomain+item.filePhysPath+') no-repeat center ce...
Vue 实现v-for循环的时候更改 class的样式名称
10-15
在Vue.js中，当需要在`v-for`循环中为每个元素动态地更改CSS类时，我们可以利用`v-bind:class`指令。`v-bind:class`允许我们根据数据动态地绑定一个或多个类。这里我们将详细讲解如何实现这个功能，并提供一个实例来...
在vue的v-for中使用索引index值
01-06
在Vue.js框架中，`v-for`指令是一个非常重要的特性，用于遍历数组或对象，渲染列表或重复的模板。当我们需要在`v-for`循环中跟踪每个项目的唯一标识或执行特定操作时，可以利用其提供的索引`index`值。下面我们将...
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
在Vue.js中，条件循环判断、计算属性以及绑定样式是构建动态用户界面的关键特性。首先，我们来看条件判断，这包括`v-if`、`v-else-if`、`v-else`和`v-show`。 1. `v-if`指令用于在满足特定条件时才渲染元素。例如，...
vue使用v-for实现hover点击效果
10-17
在Vue.js中，我们可以利用其强大的数据绑定和事件处理能力来实现复杂的功能，比如在使用`v-for`循环遍历列表时，同时实现鼠标悬停（hover）和点击效果。`v-for`指令用于渲染列表或数组，而`v-on`指令（通常简写为`@`...
vue 动态绑定背景图片的方法
10-18
主要介绍了vue 动态绑定背景图片的方法,在文末给大家介绍了vue如何给v-for循环的标签添加背景图片，需要的朋友参考下吧
7.vue 中样式绑定与指令 v-if、v-show、v-for。
weixin_45735755的博客
08-14 997
vue 中样式绑定与指令 v-if、v-show、v-for。学习笔记
vue中v-for循环中class变量带入与style变量带入
m0_37632915的博客
04-29 4057
初学vue碰到了变量不知道如何带入的问题，尝试了和寻找答案后做出以下总结： 话不多说直接上代码 <item class="item-icon-right" style="height: 50px" v-for="(item, index) in items_income" :key="index" @click.native="onItemClick(item.id)"> <i...
04 Vue常用指令：v-if、v-for、:style、:class
巅峰键盘侠
08-25 1007
1、v-show、v-if 指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04 VueJS常用指令</title> <script src="https://cdn.bootcss.com/vu...
vue中的v-for循环
热门推荐
PCthedream的博客
09-21 4万+
1.v-for遍历普通数组1.v-for遍历普通数组in前面如果是一个变量，那么该变量保存的是数组中的数据in前面如果是两个变量，那么第一个变量保存的是数组中的数据，第二个变量保存的是下标。
vue v-for 样式赋值
Wisdom—Yoga—TaciturnKnight（WYT）
12-07 3744
v-bind:style="{'background-color': item.iconColor}"> {{item.name}} v-bind:style="{'background-color': item.iconColor}"> {{item.
AI人工智能课程 机器学习算法班第18讲：循环神经网络与自然语言处理 共40页.pdf
最新发布
07-14
【课程大纲】 第1讲：概率论与数理统计 共34页.pdf 第2讲：线性代数与矩阵论 共62页.pdf 第3讲：凸优化初步 共66页.pdf 第4讲：最大熵模型与EM算法 共38页.pdf 第5讲：决策树、随机森林、GBDT、XGBoost 共36页.pdf 第8讲：机器学习中的特征工程 共51页.pdf 第9讲：机器学习调优与模型融合 共32页.pdf 第10讲：推荐系统原理与应用 共58页.pdf 第11讲：排序与CTR预估问题 共35页.pdf 第12讲：聚类和社交网络算法 共60页.pdf 第13讲：机器学习算法之图模型初步 共21页.pdf 第15讲：主体模型 共43页.pdf 第16讲：人工神经网络 共45页.pdf 第17讲：计算机视觉与卷积神经网络 共50页.pdf 第18讲：循环神经网络与自然语言处理 共40页.pdf 第19讲：深度学习框架与应用 共61页.pdf 第20讲：采样与变分 共26页.pdf
vue采用v-for显示图片列表
09-02
然后，在页面中使用v-for指令来循环遍历数组，并使用v-bind指令来绑定图片路径和标题等属性。 具体实现步骤如下： 1. 在Vue的data对象中定义一个名为images的数组，用来存储图片信息，例如：[{src: '图片路径', ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值