vue基础教学（2）

最新推荐文章于 2024-07-12 14:10:05 发布

I`ivresse

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量109

点赞数 2

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/Taojia9958/article/details/124874136

版权

一、 v-bind的基本使用

“v-bind基本使用有时候属性也不是写死的,也是需要根据某些变量某些数据动态来决定的。比如动态绑定a元素的href属性比如动态绑定img元素的src属性比如动态绑定一些类、样式这个时候,我们可以使用v-bind指令。 v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值”

<body>
		<!-- v-bind是vue中的一个指令 主要用于绑定一个属性 他是语法糖是v-bind:=>: -->
		<div id="app">
			<h3 v-bind:title="msg">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h3>
		</div>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:'#app',
				data(){
					return {
						// msg:'页面加载于'+new Date().toLocaleString()
						msg:`页面加载于${new Date().toLocaleString()}`
					}
				}
			})
		</script>
	</body>

二、v-bind动态绑定class(对象)

1、用法：通过布尔值决定是否将该类名添加到class上

 <p :class="{类名1:布尔值，类名2：布尔值}"></p>

背景：通过判断给class添加类名，动态改变元素的样式

    <style>
        .active{
            color: red;
        }
    </style>

在class前用v-bind的语法糖，动态绑定class的属性
给class属性创建一个对象，用键值对的方式给类名添加false或true
true则给class添加该类名，false则不添加
true和false可以动态改变

    <div id="app">
        <p :class="{active:isActive,line:isLine}">Hello</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                isActive : true,
                isLine : true
            }
        })

最低0.47元/天解锁文章

I`ivresse

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础教学（2）

一、 v-bind的基本使用“v-bind基本使用有时候属性也不是写死的,也是需要根据某些变量某些数据动态来决定的。比如动态绑定a元素的href属性比如动态绑定img元素的src属性比如动态绑定一些类、样式这个时候,我们可以使用v-bind指令。 v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值”<body>  <di
复制链接

扫一扫