Vue学习系列(四):Vue的v-bind

Vue学习系列:
上一篇:Vue学习系列(三):Vue的插值表达式v-text和v-html

Vue的v-bind指令是用来绑定html属性的一个指令,同时v-bind还可以简写成为:指令,比如v-bind:src:src的指令效果在Vue中是一样的。


<html>
	<head>
		<meta charset="utf-8">
		<title>v-bindtitle>
		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<img v-bind:src="url"/>
			<img :src="url"/>
		div>
		
	body>
	<script>
		const app = new Vue({
		  el: '#app',
		  data: {
			url: 'img/01.jpg'
		  }
		})
	script>
html>

v-bind指令中除了可以使用data数据进行渲染,还可以进行一些简单的运算:比如字符串拼接,number类型计算,函数类型等等。


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			
			<h1 :title="title1+title2">鼠标悬浮显示标题:v-bind字符串拼接h1>
			
			<h1 :title="num1 + num2">鼠标悬浮显示标题:v-bind number类型计算h1>
			
			<h1 :title="getTitle()">鼠标悬浮显示标题:v-bind执行函数h1>
			
			<h1 :title="obj">鼠标悬浮显示标题:v-bind对象类型h1>
			
			<h1 :title="arr">鼠标悬浮显示标题:v-bind数组类型h1>
			
			<h1 :title="flag1">鼠标悬浮显示标题:v-bind Boolean true类型h1>
			
			<h1 :title="flag2">鼠标悬浮显示标题:v-bind Boolean falseh1>
		div>
	body>
	<script>
		var obj = {username: '张三',password:'123'};
		obj.toString = function(){
			return "{username: '张三',password:123}";
		}
		const app = new Vue({
		  el: '#app',
		  data: {
			title1 : '标题一',
			title2 : '标题二',
			num1: 3,
			num2: 2,
			getTitle: function(){
				return 'return title'
			},
			//如果v-bind绑定的是对象,那么需要重写对象的toString()方法
			obj: obj,
			arr: [1,2,3],
			flag1: true,
			flag2: false,
		  }
		})
	script>
html>

你可能感兴趣的:(前端)