Vue复习6：class与style绑定

最新推荐文章于 2023-08-10 17:43:20 发布

爱发呆的程序员

最新推荐文章于 2023-08-10 17:43:20 发布

阅读量192

点赞数 1

分类专栏：笔记 Vue 文章标签： vue

本文链接：https://blog.csdn.net/tinglis/article/details/114259775

版权

笔记同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

Vue

21 篇文章 0 订阅

订阅专栏

Vue复习6：class与style绑定

这块主要内容主要与样式设置有关。
操作元素的class列表和内联样式是数据绑定的一个常见的需求。因为他们都是atribute，所以我们可以用 v-bind处理它们：只需要通过表达式计算出字符串结果即可，不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue.js做了专门的增强。表达式结果的类型除了字符串以外，还可以是对象或数组。

下面先看一下`Class的绑定

在“列表渲染”中给每个列表添加对应的样式。

	<style>
      .actived {
        background-color: #dddddd;
      }
    </style>

下面给li列表添加上上面所定义的样式

 		<li
          v-for="(item,index) in users"
          :key="item.id"
          :class="{actived:true}"
        >
          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        </li>

在上面代码中，我们可以看到，给li标签绑定了class属性，同时actived的值为true，表示给li添加activef样式。

现在有一个需求，就是当鼠标移动到列表项上的时候，更改对应的背景色。

  		<li
          v-for="(item,index) in users"
          :key="item.id"
          :class="{actived:selectItem===item}"
          @mousemove="selectItem=item"
        >

在对class进行绑定的时候，做了一个判断，判断一下selectItem是否与item相等，如果相等添加样式。

当鼠标移动到摸个li列表上的时候，触发mousemove事件，将item的值给seelectItem.

在data中定义selectItem.

如下所示：

		data: {
          selectItem: "",
          users: [
            {
              id: 1,
              name: "张三",
            },
            {
              id: 2,
              name: "李四",
            },
            {
              id: 3,
              name: "老王",
            },
          ],
        },

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表渲染</title>
    <style>
      .actived {
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->
        <!-- 注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复 -->
        <!-- index表示数组的索引值，该名字可以随意定义 -->
        <li
          v-for="(item,index) in users"
          :key="item.id"
          :class="{actived:selectItem===item}"
          @mousemove="selectItem=item"
        >
          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        </li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          selectItem: "",
          users: [
            {
              id: 1,
              name: "张三",
            },
            {
              id: 2,
              name: "李四",
            },
            {
              id: 3,
              name: "老王",
            },
          ],
        },
      });
    </script>
  </body>
</html>

下面，我们再看一下style的绑定。

        <li
          v-for="(item,index) in users"
          :key="item.id"
          :style="{backgroundColor:selectItem===item?'#dddddd':'transparent'}"
          @mousemove="selectItem=item"
        >
          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        </li>

通过上面的代码，可以看到通过绑定style的方式来处理样式是非常麻烦的。

爱发呆的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue复习6：class与style绑定

Vue复习6：class与style绑定这块主要内容主要与样式设置有关。操作元素的class列表和内联样式是数据绑定的一个常见的需求。因为他们都是atribute，所以我们可以用 v-bind处理它们：只需要通过表达式计算出字符串结果即可，不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue.js做了专门的增强。表达式结果的类型除了字符串以外，还可以是对象或数组。下面先看一下`Class的绑定在“列表渲染”中给每个列表添加对应的样式。 <style>
复制链接

扫一扫