css3 背景切换-属性绑定

bendan520 2023年9月5日 css3 0

内容目录：

1.属性绑定

2.条件渲染

3.列表渲染

属性绑定

双花括号不能在 HTMLattributes 中使用。要响应式绑定属性，您应该使用 [v-bind` 指令

v-bind 指令指示 Vue 将元素的 idattribute 与组件的dynamicId 属性对齐。 如果绑定值为 null 或未定义，则该属性将从呈现的元素中删除。

缩写

由于 v-bind 非常常用，我们提供了具体的缩写句型：

以:开头的属性可能看起来和通常的HTML属性不太一样，但它确实是一个合法的属性名称字符，所有支持Vue的浏览器都可以正确解析它。 据悉，它们不会出现在最终渲染的 DOM 中。 缩写句型是可选的，但我相信当你更多地了解它的好处后，你应该会更喜欢它。

在下面的指南中，我们将在示例中使用缩写句型，因为这是实际开发中更常见的用法。

布尔属性

布尔属性根据真/假值确定该属性是否应该存在于元素上。 残疾是最常见的情况之一。

切换背景图_切换背景色_css3 背景切换

v-bind 在这些场景中的行为略有不同：

当isButtonDisabled为true时，元素将包含此disabled属性。 当该属性为 false 时，该属性将被忽略。

动态绑定多个值

假设您有一个具有多个属性的 JavaScript 对象，如下所示：

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

您可以通过 v-bind 不带参数将它们绑定到单个元素：

例子

功效：

源代码：


    
{{ msg }}

    

    
{{ msg }}

    

    
{{ msg }}

    

    
    

    
{{ msg }}



export default{
    data(){
        return{
            msg:"测试",
            dyId:"div_id",
            dyClass:"wrapper",
            isButtonDisabled:true,
            objectOfAttrs: {
                id: 'container',
                class: 'wrapper'
            }
        }
    }
}


.wrapper{
    color: red;
}

切换背景色_切换背景图_css3 背景切换

条件渲染

v-如果

v-if 指令用于有条件地呈现一段内容。 仅当指令的表达式返回 true 时才会呈现该内容块。

Vue is awesome!

v-其他

您还可以使用 v-else 向 v-if 添加“else 块”。



Vue is awesome!


Oh no

v-else-if

顾名思义，v-else-if 提供了与 v-if 对应的“elseif 块”。 它可以连续重复使用多次：


  A




  B




  C




  Not A/B/C

与 v-else 类似，使用 v-else-if 的元素必须紧接在 v-if 或 v-else-if 元素之前。

v-如果打开

由于 v-if 是一条指令，因此它必须产生一个元素。 但是如果我们想要切换多个元素怎么办？ 在这些情况下，我们可以在某个元素上使用 v-ifcss3 背景切换，该元素只是一个不可见的包装元素，最终的渲染结果将不包含该元素。


  
Title

  
Paragraph 1

  
Paragraph 2

v-else 和 v-else-if 也可以使用。

视频秀

另一个可用于有条件地显示元素的命令是 v-show。 其用法基本相同：

Hello!

不同的是v-show保留了DOM渲染中的元素； v-show 只切换元素上名为 display 的 CSS 属性。

v-show 不支持在元素上使用，也不能与 v-else 一起使用。

v-ifvs.v-show

v-if 是“真”条件渲染，因为它确保切换时，条件块内的风暴错误和子组件被销毁并重新创建。

v-if 也是惰性的：如果条件在第一次渲染时计算为 false，则不执行任何操作。 仅当条件第一次变为真时才会渲染条件块。

相比之下，v-show就简单多了。 无论初始条件如何，该元素仍然会被渲染，并且只有 CSSdisplay 属性会被切换。

一般来说，v-if 的切换开销较高，而 v-show 的初始渲染开销较高。 为此，如果需要频繁切换，最好使用v-show； 如果绑定条件在运行时很少改变，v-if会更合适。

例子

功效：

源代码：


    
条件渲染

    
flag:true >> You saw me

    
flag:false >> You can't see me

    
flag:true (v-if == v-show) >> You saw me

    
A

    
B

    
C

    
No A/B/C



    export default{
        data(){
            return {
                flag:true, -- false,
                type:"B"
            }
        }
    }

列表渲染 v-for

我们可以使用 v-for 指令来渲染基于链表的列表。 v-for命令的取值需要使用itemminitems的特殊句型，其中items是源数据的链表，item是迭代项的别名：

js

data() {
  return {
    items:["AAA","BBB","CCC"],
  }
}

  • 
  {{ item }}

    • 
或

  • 
  {{ item }}

    • 父作用域中的属性和变量可以在 v-for 块中完全访问。 v-for 还支持可选的第二个参数，指示当前项的位置索引。

    data() {
  return {
    parentMessage: 'Parent',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

  • 
  {{ parentMessage }} - {{ index }} - {{ item.message }}

    • 
或

  • 
  {{ parentMessage }} - {{ index }} - {{ item.message }}

    • 切换背景图_切换背景色_css3 背景切换

    v-for 和对象

    您还可以使用 v-for 迭代对象的所有属性。 遍历的顺序将根据对象上调用 Object.keys() 的返回值来确定。

    data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}

      
  
    • 
    {{ value }}
  
      •

    您可以通过提供第二个参数来指示属性名称（例如 key）：

  • 
  {{ key }}: {{ value }}

    • 第三个参数表示位置索引：

  • 
  {{ index }}. {{ key }}: {{ value }}

    • 通过按键管理状态

    默认情况下，Vue 按照“就地更新”策略更新通过 v-for 渲染的元素列表。 当数据项的顺序发生变化时，Vue 不会突然对 DOM 元素重新排序，而是就地更新每个元素css3 背景切换，确保它们在之前指定的索引位置处渲染。

    默认模式效率较高，但仅适用于列表渲染输出结果不依赖于子组件状态或临时 DOM 状态（例如表单输入值）的情况。

    为了给 Vue 一个提示，以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素，您需要为每个元素对应的块提供唯一的 keyattribute：

    使用时，钥匙应放置在该容器上：

    
  
  • {{ todo.name }}
    •