绑定属性名

最新推荐文章于 2024-09-25 11:06:23 发布

hq520hq

最新推荐文章于 2024-09-25 11:06:23 发布

阅读量60

点赞数

文章标签： java jvm servlet

本文链接：https://blog.csdn.net/hq520hq/article/details/127462770

版权

v-bind动态绑定class语法：
两种方式：①对象语法 ②数组语法

①对象语法：
用法一：直接通过{}绑定一个类

<h3 :class="{'active':isactive}"> Hello World！</h3>

用法二：也可以通过判断,传入多个值

<h3 :class="('active': isActive, 'line': isLine)"> Hello world！</h3>

用法三：和普通的类同时存在,并不冲突
注:如果isActive和isLine都为true,那么会有title/active/line三个类

<h3 class="title"  :class="{'active' : isactive , 'line' : isline}"> Hello world！ </h3>

用法四：如果过于复杂,可以放在一个methods或者computed中
注: classes是一个计算属性

v-bind动态绑定style语法：

作用：利用v-bind:style来绑定一些CSS内联样式
绑定class有两种方式：

①对象语法（使用较多）

	<div id="app">
		<p :style="{ fontSize: fontSize + 'px'}">{{message}}</p> 
	</div>
    <script>	
	new Vue({
		el:'#app',
		data:{
			message:'你好！',
			fontSize:40
		}
	})

②数组语法

	<div id="app">
		<p :style="[baseStyles,baseStyles1] ">{{message}}</p> 
	</div>
    <script>	
	new Vue({
		el:'#app',
		data:{
			message:'你好！',
			baseStyles:{	fontSize: '20px'},
			baseStyles1:{	backgroundColor: 'red'},	
		}
	})

将属性名转化为对象名

<body>
    <div id="root">
         
        <div style="color: blue;font-size: 50px;">热爱的终点不是结束，而是开始</div>

<!-- 将属性名改为对象名，在外部加个{}，以及注意需符合 -->
        <div :style="{color:'pink',fontSize:'50px' }">热爱的终点不是结束，而是开始</div>


        <div :style="{color:color,fontSize:size }">热爱的终点不是结束，而是开始</div>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                color:'black',
                size:'66px'
            }

        })
    </script>
</body>

对象名-class名的转化

<style>
        .box{
            width: 150px;
            height: 150px;
            margin-left: 20px;
            border: 3px solid red;
        }
        .bg{
            background: pink;
        }
    </style>
</head>
<body>
    <div id="app">
      <div class="box" :class="{bg:isbg}"></div><button @click="change">切换</button>
      
    
    </div>
          <script>
            new Vue({
                el:'#app',
                data:{
                   isbg:true
                },
                methods:{
                    change(){
                  this.isbg=false
                    }
                }
            })
          </script>
</body>