v-bind的使用动态绑定class和图片

无尘本无物

已于 2023-07-19 16:26:12 修改

阅读量241

点赞数

文章标签： javascript 前端开发语言

于 2023-06-13 15:35:08 首次发布

本文链接：https://blog.csdn.net/m0_45884629/article/details/131189554

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind的使用</title>
</head>
<body>
	 <!-- v-bind指令
	   		v-bind是单向的数据绑定只能从data流向页面，也就是data数据变化页面变化，但是页面修改值data的中的数据不变
	        HTML标签某个属性的值进行动态绑定效果
	        原理 编译前:<HTML标签 v-bind:参数="表达式"></HTML标签>
	             编译后:<HTML标签 参数="表达式的执行结果"></HTML标签>
	        在编译的时候v-bind后面的"参数名"会被编译为HTML标签的"属性名"
	        表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化
	        常用于动态绑定class类型，或者一些组件库中的属性绑定
	        可以简写为:  v-bind:class="xxx" 等价于:class="xxx"
	    -->
    <div id="App">
        <!-- //动态绑定class 方式一  所有的v-bind都可以简写直接 :class-->
        <div class="box" v-bind:class="isActive?'active':''"></div>
        <!-- //动态绑定class 方式二 -->
        <div v-bind:class="['box',isActive?'active':'']"></div>
        <!-- //动态绑定class 方式三 -->
        <div v-bind:class="['box',{'active':isActive}]"></div>
        <!-- //动态绑定class 方式四  所有的v-bind都可以简写为 ：-->
         <div :class="classArray"></div>
        <!-- 动态绑定src 方式一-->
        <img v-bind:src="isLogin?'../img/login.png':'../img/1.png'">
         <!-- 动态绑定src 方式二-->
         <img v-bind:src="imgs[LoginState]">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: '#App',
        data: {
        	classArray:['box','active']
            isActive: true,
            isLogin:true,
            imgs:['../img/login.png','../img/1.png'],
            LoginState:0
        },
        methods: {

        },
    })
</script>
<style lang="scss">
    .box {
        width: 100px;
        height: 100px;
        margin: 10px;
    }

    .active {
        background-color: aqua;
    }
</style>

</html>