v-bind属性渲染指令

最新推荐文章于 2023-03-28 20:45:08 发布

正在修炼web的小芮

最新推荐文章于 2023-03-28 20:45:08 发布

阅读量178

点赞数

分类专栏： vuejs 文章标签： vue.js vuejs

本文链接：https://blog.csdn.net/m0_71814235/article/details/126874237

版权

vuejs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

v-bind 指令被用来响应地更新 HTML 属性，主要是绑定属性。
v-bind:href 可以缩写为 :href;

绑定对象

v-bind支持绑定一个数组，数组中的ClassA和ClassB对应为data中的数据。

 <style>
        .box{
            border:1px dashed #f0f;
        }
        .textColor{
            color:#f00;
            background-color:#eef;
        }
        .textSize{
            font-size:30px;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 当前给ul动态渲染 class类 -->
        <!-- textColor:isColor 当前要用这个textColor样式  
            后面isColor的值必须要为真 true   
            不用就把它(isColor)的值变成false -->
        <ul class="box" v-bind:class="{textColor:isColor,textSize:isSize}">
            <li>学习Vue</li>
            <li>学习Node</li>
            <li>学习React</li>
        </ul>
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    isColor:true,
                    isSize:true,
                }
            },
            methods:{
                
            }
        })
    </script>

预览效果

   <style>
        .box{
            border:1px dashed #f0f;
        }
        .textColor{
            color:#f00;
            background-color:#eef;
        }
        .textSize{
            font-size:30px;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <div id="app">
     
        <ul class="box" v-bind:class="[classA,classB]">
            <li>学习Vue</li>
            <li>学习Node</li>
            <li>学习React</li>
        </ul>
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    // 把样式区域里 提前定义好的样式  存储到数据中心指定的变量中
                   classA:'textColor',
                   classB:'textSize'
                }
            },
            methods:{
                
            }
        })
    </script>

预览效果

绑定对象和绑定数组的区别

绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的是data 中的数据

样式渲染-绑定style

在项目中，有的时候，我们需要绑定内置（内联、行内）样式，这个时候我们可以使用v-bind:style 进行数据渲染。

    
    <div id="app">
        <h1>样式渲染-绑定style</h1>
        <!-- 内联式  动态渲染的3种写法 -->
        <!-- 1.以对象的形式  进行直接 渲染-->
        <p v-bind:style="styleObject">老李不老</p>
        <hr>
        <!-- 2.在标签渲染样式的地方，直接写对象，动态调用数据中心的变量 -->
        <p v-bind:style="{color:mycolor, 'font-size':myfont, 'background-color':mybg}">李大熊</p>
        <!-- 3.以数组的形式 进行直接渲染，其中数组每个单元上的内容是一个对象（也就是 将多个对象 放置到数组中） -->
        <p v-bind:style="[styleObject1,styleObject2]">李大熊是憨批</p>
        
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    styleObject:{
                        color:'pink',
                        fontSize:'150px',//js小驼峰的写法
                        // font-size:'150px',css样式的写法
                        backgroundColor:'lightblue',
                        marginBottom:'30px'

                    },
                    mycolor:'springgreen',
                    myfont:'120px',
                    mybg:'purple',
                    styleObject1:{
                        color:'yellowgreen',
                    },
                    styleObject2:{
                        fontSize:'160px',
                    }
                }
            },
            methods:{
                
            }
        })
    </script>

预览效果