作业day01

最新推荐文章于 2021-06-22 03:22:54 发布

love cc

最新推荐文章于 2021-06-22 03:22:54 发布

阅读量124

点赞数

分类专栏： day01 文章标签：作业

本文链接：https://blog.csdn.net/jerry0529/article/details/102926114

版权

day01 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、总结一下v-text和v-html和插值表达式的差别
v-text 将m中内容以文本格式写入到v中
v-html 将m中内容以html代码的形式渲染到v中

2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值
3、script
var vm = new Vue({
el:”#app”
data:{
msg:”gly”,
}
});
3、什么是MVVM模式，这样设计有什么优点
1.视图,往往是div,View
2.数据,数据被用于展示在视图div之中,Model
3.监视者,即由vue创建出来的vm对象,他的作用是,监视数据和视图的变化,并将变化反应到另一方,VM
这三者组合起来,叫做mv vm 设计模式.
4、使用vue将下列data中cat的几条属性插入到页面之中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>姓名:{{cat.name}}</p>
			<p>年龄:{{cat.age}}</p>
			<p>描述:{{cat.desc}}</p>
		</div>

<script>
	var vm = new Vue({
		
		el: "#app",
		data: {
				cat: {
					name: '罗小黑',
					age: 8,
					desc: '是一只黑色的猫',
				}
			}
	});
	
</script>
</body>

5、使用vue，完成一个计算器功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="t1">
			<select v-model="aaa" name="fruit">
					<option value="+">+</option>
					<option value="-">-</option>
					<option value="*">*</option>
					<option value="/">/</option>
			<input type="text" v-model="t2">
				<input type="button" value="计算" @click="jisuan">
				<input type="text"  :value="result">
				
		</div>
		<script>
			var vm = new Vue({

				el: "#app",
				data: {
					t1: "",
					t2: "",
					result:"",
					aaa:""
				},
				methods: {
					jisuan() {
						var t1 = this.t1;
						var t2 = this.t2;
						var t3 = this.t3;
						if (this.aaa == "+") {
							this.result = t1 / 1 + t2 / 1 ;
							// 弱变量类型和强变量类型语言的差异在于,能否进行隐式的类型转换
						}
						if (this.aaa == "-") {
							this.result = parseInt(t1) -	parseInt(t2) ;
						}
						if (this.aaa == "*") {
							this.result = parseInt(t1) *	parseInt(t2) ;
						}
						if (this.aaa == "/") {
							this.result = parseInt(t1) /	parseInt(t2) ;
						}
					}
				}
			});
		</script>
	</body>
</html>