vue（三）基础语法--vue属性绑定

不修×蝙蝠

已于 2025-01-13 09:02:50 修改

阅读量302

点赞数 4

分类专栏：前端开发文章标签： vue.js javascript 前端 vue SSM 属性绑定 v-bind

于 2025-01-13 01:32:06 首次发布

本文链接：https://blog.youkuaiyun.com/m0_74977981/article/details/145103586

版权

前端开发专栏收录该内容

32 篇文章

订阅专栏

引入

在前面的基础上，进一步探讨属性绑定相关知识。

重建一个新的项目

1.App.vue

2.main.js

3.HelloWorld.vue

属性绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令（也可以用“:”代替）

<template>
    <div v-bind:id="dynamicId" v-bind:class="dynamicClass">测试</div>
    <!-- 可以用:代替，即： -->
    <div :id="dynamicId" :class="dynamicClass">测试</div>
</template>
<script>
    export default{
        data(){
            return{
                dynamicClass:"appClass",
                dynamicId:"appid"
            }
        }
    }
</script>
<style>
    .appClass{
        color: red;
        font-size: 30px;
    }
</style>

此时在APP.vue中，只用写引入即可：

<script>
// 第一步，引入组件
  import HelloWorld from './components/HelloWorld .vue';

  export default{
    //第二步，注册组件
      components:{
          HelloWorld 
      }
  }
    
</script>
<template>
    <!-- 第三步显示组件 -->
    <HelloWorld />
</template>

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicid 属性保持一致。如果绑定的值是 null 或者undefined,那么该 attribute 将会从渲染的元素上移除

比如(则标签不会具备dynamicTitle属性)：

简写方案

因为 v-bind 非常常用，我们提供了特定的简写语法：

布尔型Attribute

布尔型 attribute 依据 true /false 值来决定 attribute 是否应该存在于该元素上,disabied 就是最常见的例子之一。

动态绑定多个值

如果你有像这样的一个包含多个 attribute 的JavaScript 对象

<template>
    <div v-bind="ObjectofAttrs">动态绑定多个属性</div>  
</template>
<script>
    export default{
        data(){
            return{
                ObjectofAttrs:{
                      class:"appClass",
                      id:"appid"
                }
            }
        }
    }
</script>
<style> <!-- 属性渲染(借用属性绑定的基础实现css的正常实现) -->
    .appClass{
        color: red;
        font-size: 30px;
    }
</style>