作业1

最新推荐文章于 2022-04-07 15:27:26 发布

weixin_45838872

最新推荐文章于 2022-04-07 15:27:26 发布

阅读量173

点赞数

文章标签：作业1

本文链接：https://blog.csdn.net/weixin_45838872/article/details/102925924

版权

1、总结一下v-text和v-html和插值表达式的差别
v-text 将m中内容以文本格式写入到v中
v-html 将m中内容以html代码的形式渲染到v中
2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值

在这里插入代码片
				<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:”aaa”
					}
				});

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>
</html>

计算器

在这里插入代码片<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="a"><!-- 第一个操作数 -->
			<select 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"></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);
							// this.result=this.a/1+this.b/1;
						}
						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>
</html>

weixin_45838872

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
作业1

1、总结一下v-text和v-html和插值表达式的差别v-text 将m中内容以文本格式写入到v中v-html 将m中内容以html代码的形式渲染到v中2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值在这里插入代码片 <div id="app"> <p>消息：...
复制链接

扫一扫