指令之v-bind

指令之v-bind

指令之v-bind

v-bind 绑定元素属性

:width="image.width" :height="image.height" :src="image.url" :alt="image.alt"

v-bind 绑定元素class

:class="{active:Active}"

v-bind 绑定元素行内样式

:style="{color:color_y,background:background_b}"

示例demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>指令之v-bind</title>
	<style>
		.active{
			font-weight: 800;
		}
	</style>
</head>
<body>
    <div id="app">

	    <div>v-bind 绑定元素属性</div>
	    <!-- v-bind:href 可简写成 :href -->
	    <div>
	    <a v-bind:href="msg.link">{{ msg.name }}</a>
	    </div>
		<img :width="image.width" :height="image.height" :src="image.url" :alt="image.alt">
	    <hr>

        <div>v-bind 绑定元素class</div>
			<div :class="{active:Active}">
				v-bind 绑定元素class
			</div>
        <hr>
    
        <div>v-bind 绑定元素行内样式</div>
			<div :style="{color:color_y,background:background_b}">
				v-bind 绑定元素行内样式
			</div>
        <hr>
    </div>
    
    <!-- 1. 引包-->
	<script src="./vue.js"></script>
	<script>
        // 2.初始化
        const vm = new Vue({
            el: '#app',
            // 数据属性
            data: {
				msg:{
					name: '百度',
					link: 'http://www.baidu.com'
				},
				image:{
					url: "https://www.baidu.com/img/bd_logo1.png",
					alt: '百度百度',
					height: 40,
					width: 80,

				},
				Active: 'active',
				color_y: 'yellow',
				background_b: 'black'
            }
        })

	</script>
</body>
</html>

posted on 2020-01-16 16:50 anyux 阅读(142) 评论(0) 收藏举报