第一天作业

最新推荐文章于 2022-07-27 22:18:12 发布

tiantianfengtou

最新推荐文章于 2022-07-27 22:18:12 发布

阅读量97

点赞数

分类专栏：实训作业

本文链接：https://blog.csdn.net/tiantianfengtou/article/details/102926336

版权

实训作业专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.

v-text 用来单独展示Vue对象里的数据，而V-tml用来用于传递过来的数据有html标签，则使用v-html

2.



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Title</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<div id="app">
	<p>{{msg}}</p>
	<p v-text="msg"></p>
	<p v-html="msg"></p>
	</div>
	<script>
		var vm =new Vue({
			el:"#app"，
			data: 
			{
				msg: "hello world"
			}，
		});
	</script>
	</body>
</html>

3.

MVVM是一种思想。即UI随数据更改而更改.优点有低耦合，可重用性，独立开发性，和可测试性.
``

4.

		<p v-for="(value,key) in cat">
			<span>{{key}}</span>
			<span>{{value}}</span>
		</p>
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				cat: {
					'姓名：': '罗小黑',
					'年龄：': 8,
					'描述：': '是一只黑色的猫'
				},
			},
		})
	</script>
</body>

5.

	<div id="app">
		<input type="text" v-model="a">
		<select name="" id="" v-model="c">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input type="text" v-model="b">
		<input type="button" value="计算" @click="calculate">
		<input type="text" v-bind:value="result">
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				a: '', 
				b: '', 
				c: '',
				result: '',
			},
			methods: {
				calculate() {
					if (this.c == '+') {
						this.result = parseInt(this.a) + parseInt(this.b);
					}
					if (this.c == '-') {
						this.result = parseInt(this.a) - parseInt(this.b);
					}
					if (this.c == '*') {
						this.result = parseInt(this.a) * parseInt(this.b);
					}
					if (this.c == '/') {
						this.result = parseInt(this.a) / parseInt(this.b);
					}
				}

			},
		})
	</script>
</body>