Vue基本语法

最新推荐文章于 2024-02-04 14:52:21 发布

jarvis314159

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量95

点赞数

分类专栏：前端笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_43283513/article/details/111600569

版权

前端笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<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">
		    **v-bind：单向数据绑定，用于标签的属性中 可简写,如：v-bind:title简写为：title**
			<span v-bind:title="msg">哈哈哈</span>  //span的悬浮标签title绑定到vm的msg属性
			**if判断**
            <h1 v-if="code===200">张三</h1>   //根据vm的code属性是否为布尔值判断显示“张三”、“李四”还是“王五”
			<h1 v-else-if="code===300">李四</h1>
			<h1 v-else>王五</h1>
			**for循环遍历数组组装list**
			<li v-for="item in data">
				{{item.userid}}
				{{item.username}}
			</li>
			**for循环遍历数组组装表格**
			<table border="1">
				<tr v-for="item in data">
					<td>{{item.userid}}</td>
					<td>{{item.username}}</td>
				</tr>
			</table>
			**for循环从1遍历到5**
			<ul>
				<li v-for="item in 5">{{item}}</li>
			</ul>
			<ul>
				<li v-for="(item,index) in 5">{{item}}--{{index}}</li>
			</ul>
			**绑定事件 v-on:click可简写为：@click**
			<button v-on:click="getUserInfo">click me</button>
		</div>

		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					code:200,
					msg:"hello,Vue!",
					data:[
						{userid:"1",username:"jarvis"},
						{userid:"2",username:"sojrs"}
					]
			    },
				methods:{  //方法必须定义在Vue对象的methods中，元素使用v-on绑定事件
					getUserInfo: function(){
						alert(this.msg);
					},
					//ES6写法
					eat(){
						console.log("吃...");
					}
				}
			});
		</script>
	</body>
</html>