vue元素属性绑定v-bind

最新推荐文章于 2024-01-21 22:30:20 发布

木蓝茶陌*_*

最新推荐文章于 2024-01-21 22:30:20 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue指令 v-bind 属性绑定 class属性绑定 style属性绑定

本文链接：https://blog.csdn.net/jyn15159/article/details/111190898

版权

vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

vue元素属性绑定v-bind

属性绑定-基本使用

使用 v-bind 指令对标签标准属性进行绑定。

语法：

<标签 v-bind:属性名称="表达式" ></标签>

<!-- 简易方式设置，推荐使用 -->
<标签 :属性名称="表达式"></标签>

注意：

冒号(:)的简易设置推荐使用。
如果有需要，绑定的内容可以进行变量、常量、算术运算、比较运算、逻辑运算、三元运算等技术应用。

案例：

通过v-bind对img标签的src、width、height属性进行绑定：

<div id="app">
    <p>
        <img v-bind:src="mysrc" alt="" :width="wh" :height="ht" />
    </p>
</div>
<script src="./vue.js"></script>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            mysrc:'./laofu.jpg',
            wh:280,
            ht:190
        }
    })
</script>

属性绑定-class属性

使用 v-bind 对标签的class属性进行绑定。

class属性较比其他属性不一样的地方是，其既可以接收一个值，也可以通过空格分隔接收多个值

<tag class="apple"></tag>				   <!--接收一个值-->
<tag class="apple pear orange"></tag>		<!--接收多个值-->

class属性绑定的语法：

对象方式：

<tag :class="{xx:true, yy:false}"></tag>
<!--true: 设置   false:不设置-->

数组方式：

<tag :class="['xx','yy','zz']"></tag>
<!--数组元素值如果不是vue的data成员 就要通过单引号圈选，代表是普通字符串-->

注意：

通过数组方式给class绑定多个值，值如果不是 Vue 的 data成员，就需要通过单引号圈选，表明其是普通字符串。

案例：

通过数组、对象两种方式给p标签的class属性绑定 apple、pear、orange 多个值：

<head>
<style>
    .apple {color:blue;}
    .pear {font-size:25px;}
    .orange {background-color:hotpink;}
</style>
</head>
<body>

    <div id="app">
        <h2>属性绑定</h2>
        <p class="apple pear orange">学习Vue课程</p>
        <!-- 通过vue方式给class绑定如上3个信息 -->
        <!-- 1.对象方式 -->
        <p :class=" {apple:true, pear:true, orange:true, banana:false} ">学习Vue课程</p>
        
        <!-- 2.数组方式 -->
        <p :class=" ['apple','pear','orange'] ">学习Vue课程</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                // apple:'pingguo'
            }
        })
    </script>
</body>

注意：

通过class绑定多个值，每个值都可以设置css样式。
表达式就是要按照javascript的语法规则设置相关内容。

属性绑定-style属性

使用v-bind指令操控style属性。

style样式属性较比普通属性也比较特殊，其也可以接收多个值：

<p style="color:red; font-size:25px; background-color:lightgreen;"></p>

style属性绑定语法：

对象方式：

<tag :style="{xx:yy,xx:yy.....}"></tag>
<!--xx:样式名称，yy:样式的值-->

数组方式：

<tag :style="[{xx:yy},{xx:yy.....}]"></tag>
<!--根据需要，数组的每个元素都是一个对象，每个对象包含一对或多对css样式-->

注意：

数组方式绑定style属性，每个数组元素可以包含一个或多个css样式对。
复合属性带中横线(例如background-color)的需要通过单引号圈选，或变为驼峰名称。

案例：

通过数组、对象两种style属性绑定方式，实现如下标签效果

<p style="color:blue;font-size:25px;background-color:hotpink;">学习Vue课程-style绑定</p>

<div id="app">
    <h2>属性绑定</h2>
    <p style="color:blue;font-size:25px;background-color:hotpink;">学习Vue课程-style绑定</p>
    <!-- 通过vue实现给style绑定多个css样式信息 -->
    <!-- 1.对象方式 -->
    <p :style=" {'color':'blue','fontSize':'25px','background-color':'hotpink'} ">学习Vue课程-style绑定</p>
    
    <!-- 2.数组方式 -->
    <p :style=" [{'color':'blue','fontSize':'25px','background-color':'hotpink'}] ">学习Vue课程-style绑定</p>
    <p :style=" [{'color':'blue'},{'fontSize':'25px','background-color':'hotpink'}] ">学习Vue课程-style绑定</p>
    <p :style=" [{'color':'blue'},{'fontSize':'25px'},{'background-color':'hotpink'}] ">学习Vue课程-style绑定</p>
</div>

<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            // apple:'pingguo'
        }
    })
</script>

注意：

通过传统方式也可以操作class或style属性，但是Vue的操控会更加灵活和精准，可以针对某一个值进行设置。

木蓝茶陌*_*

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
vue元素属性绑定v-bind

vue元素属性绑定v-bind属性绑定-基本使用使用 v-bind 指令对标签标准属性进行绑定。语法：<标签 v-bind:属性名称="表达式" ></标签><标签 :属性名称="表达式"></标签> 注意：冒号(:)的简易设置推荐使用。如果有需要，绑定的内容可以进行变量、常量、算术运算、比较运算、逻辑运算、三元运算等技术应用。案例：通过v-bind对img标签的src、wid
复制链接

扫一扫