Vue/Advanced/vuedemo02/src/pages/Home/绑定属性.vue

<template>
	<div id="app">
		<h2>{{msg}}</h2>
		<div v-bind:title="title1">鼠标瞄上去看下效果</div>
		<div :title="title1">鼠标瞄上去看下效果</div>
		<img v-bind:src="url1" />
		<div v-bind:class="css_title">绑定css</div>
		<div v-bind:style="{'width':boxWdith+'px'}">测试</div>
		<div v-html="html1"></div>
		<div v-text="text1">
			<button v-on:click="btnRun()">btn1</button>
			<button @click="btnRun()">换一种写法</button>

		</div>
		<div>
			<ol>
				<li v-for="i in list">{{i}}</li>
			</ol>
		</div>
		<div>
			<ol>
				<li v-for="(v,k) in obj1">{{k}}:{{v}}</li>
			</ol>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'app',
		data() {
			return {
				msg: "hello world!",
				title1: "测试",
				url1: "https://baidu.com",
				text1: "测试text",
				html1: "<h2>html1</h2>",
				boxWdith: 500,
				list: [1, 2, 3, 4, "hello"],
				obj1: [{}, {}, {}]
			}
		},
		methods: {
			btnRun: function() {
				alert("btn被点击了");
				this.obj1.push("增加一条数据");
			},
		}
	}
</script>

<style lang="scss">
	.css_title {
		color: #008000;
	}
</style>