Vue打卡01day

最新推荐文章于 2025-03-16 21:07:59 发布

jrymos001

最新推荐文章于 2025-03-16 21:07:59 发布

阅读量393

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/m0_37681914/article/details/87825606

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

在这里插入图片描述

<html>
	<head>
		<link rel="stylesheet" href="hello.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-if="seen">{{message}}</span><br>
			<span v-bind:title="time">时间提示</span>
		</div>
		<div id='vforApp'>
			<ol>
				<li v-for="todo in todos">
					{{todo.text}}
				</li>
			</ol>
		</div>
		<div id='vonApp'>
			<p>{{message}}</p>
			<button v-on:click="reverseMessage">逆向修改</button>
			<p>{{info}}</p>
			<input v-model="info">
		</div>
		<div id="componentApp">
			<todo-item 
				v-for="data in groceryList" 
				v-bind:todo="data" 
				v-bind:key="data.id"
				>
			</todo-item>
		</div>
		<script src="hello.js"></script>
	</body>
</html>

var app=new Vue({
	el: '#app',
	data:{
		seen:true,
		message:"Hello World!",
		time:'页面加载于 ' + new Date().toLocaleString()
	}
})
var vforApp=new Vue({
	el: '#vforApp',
	data:{
		todos:[
			{text:'学习java'},
			{text:'学习spring'},
			{text:'学习hadoop'}
		]
	}
})
var vonApp=new Vue({
	el: '#vonApp',
	data:{
		message:"zou weijun",
		info:'hello'
	},
	methods:{
		reverseMessage:function(){
			this.message = this.message.split('').reverse().join('');
		}
	}
})
Vue.component('todo-item',{
	props:['todo'],
	template:'<li>{{todo.text}}</li>'
})
var componentApp=new Vue({
	el:'#componentApp',
	data:{
		groceryList:[
			{id:0,text:'牛排'},
			{id:1,text:'红烧肉'},
			{id:2,text:'鸡蛋'}
		]
	}
});