vue学习笔记4

最新推荐文章于 2024-05-30 13:09:09 发布

FYANGFEI

最新推荐文章于 2024-05-30 13:09:09 发布

阅读量297

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/FYANGFEI/article/details/78666075

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

v-bind

<style>
	.classA{
		color:red;
	}
	.classB{
		font-size:20px;
	}
</style>
<body>
	<h1>v-bind</h1>
	<hr>
	<div id="app">
		<img v-bind:src="imgSrc" width="180" height="300">
		<p><a :href="weburl" target="_blank">百度</a></p>
		<hr>
		<div :class="className">1.绑定class</div>
		<!-- 以对象形式绑定 -->
		<div :class="{classA:isok}">
		2.绑定class中的判断</div>
		<!-- 以数组形式绑定 -->
		<div :class="[classA,classB]">3.数组绑定class</div>
		<div :class="isok?classB:classA">4.数组绑定三元运算符</div>
		<hr>
		<p>
			<input type="checkbox" v-model="isok">
			<label>{{isok}}</label>
		</p>
		<hr>
		<!-- 复合样式第二个单词字母大写且不能使用‘-’符号（vue不支持） -->
		<div :style="{color:green,fontSize:font,textAlign:align}">5.绑定style</div>
		<div :style="styleobject">6.对象绑定style</div>
	</div>

JavaScript

		var app=new Vue({
			el:'#app',
			data:{
				imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511946675730&di=11ad6fe3c138a61284a713f5b50a4b39&imgtype=0&src=http%3A%2F%2Fcimage.tianjimedia.com%2FuploadImages%2F2017%2F10%2F20171010112821608.jpg',
				className:'classA',
				weburl:'https://www.baidu.com',
				isok:true,
				classA:'classA',
				classB:'classB',
				green:'green',
				font:'50px',
				align:'center',
				styleobject:{
					color:'pink',
					fontWeight:'bold',
					fontSize:'30px'
				}
			}
		})

页面图

FYANGFEI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记4

v-bind .classA{ color:red; } .classB{ font-size:20px; } v-bind 百度 1.绑定class 2.绑定class中的判断 3.数组绑定class 4.数组绑定三元运算符 {{isok}} 5.绑定style
复制链接

扫一扫

专栏目录