返回顶部
+
-

html vue简单

1.Vue 简单的替换更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue</title>
	</head>
	<body>
		<div id="app">
			<h2>{{ product }}Python</h2>	
		</div>
		
	</body>
	<!-- <script src='js/vue.min.js'></script> -->
	<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
	<script>
		const app = new Vue({
			el:'#app',
			data: {
				product:'流浪'
			}
		})
	</script>
</html>

2.v-bind-更新标签属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue_v-bind-更新标签属性</title>
	</head>
	<body>
		<div id="page">
			<a id="prev" v-bind:href= prev>上一页</a>&nbsp;&nbsp;
			<a id="next" v-bind:href= next>下一页</a>
		</div>
	</body>
	<!-- <script src='js/vue.min.js'></script> -->
	<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
	<script>
		const app = new Vue({
			el:'#page',
			data: {
				prev:'https://www.bootcdn.cn/',
				next:'https://www.baidu.com/'
			}
		})
	</script>
</html>

3.v-for_模板更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue_v-for_模板更新</title>
	</head>
	<body>
		<div id='app'>		
			<table id="emp">
				<thead>
					<tr>
						<th>编号</th>
						<th>名字</th>
						<th>作用</th>				
					</tr>				
				</thead>
				<tbody>
					<tr v-for = 'emp in emps'>
						<td>{{emp.no}}</td>
						<td>{{emp.name}}</td>
						<td>{{emp.job}}</td>
					</tr>				
				</tbody>
			</table>		
		</div>
		<!-- <script src="js/vue.min.js"></script> -->
		<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					emps:[{no:'01',name:'锤锤',job:'让人笑'},
					{no:'02',name:'狗娃子',job:'好养活'},
					{no:'03',name:'召唤师',job:'召唤神兽'}
					]	
				}
			})
		</script>
	</body>
</html>

4.v-if_v-else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue_v-if_v-else</title>
	</head>
	<body >
		<div id ='app'>			
			<h1 v-if="Math.random() > 0.5">Yes</h1>
			<h1 v-else>No</h1>
	
			<div v-if="Math.random() > 0.5">Sorry</div>
			<div v-else>Not sorry</div>
		</div>
	</body>
	<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
	<!-- <script src="js/vue.min.js"></script> -->
	<script>
		const app = new Vue({
			el:'#app'
		})
	</script>
</html>

5.vue-computed(计算)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue-computed(计算)</title>
	</head>
	<body >
		<div id ='app'>			
			<p>我们的队名是: "{{ message }}"</p>
			<p>我可以倒背如流: "{{ reversedMessage }}"</p>
		</div>
	</body>
	<!-- <script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script> -->
	<script src="js/vue.min.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				message: '流浪python'
			},
			computed: {
				reversedMessage: function () {
					// 先把字符串切片成列表,倒序后重新组合成字符串
					return this.message.split('').reverse().join('')
				}
			}
		})

	</script>
</html>
posted @ 2019-12-30 21:23  ham_731  阅读(661)  评论(0)    收藏  举报