第一次作业

最新推荐文章于 2020-01-10 19:29:47 发布

weixin_45838685

最新推荐文章于 2020-01-10 19:29:47 发布

阅读量65

点赞数

本文链接：https://blog.csdn.net/weixin_45838685/article/details/102925842

版权

11.4作业

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<div id="app">
		<p v-text = "msg">我是</p>
		<p v-html = "msg">天才</p>
	</div>
<script src="./js/vue.js"></script>
<script>
	var vm = new Vue({
		el:”#app”,
		data: {
			msg: ”你好世界”
		}
	})
</script>
</body>
</html>

3、什么是MVVM模式，这样设计有什么优点
M:Model V:View VM:viewmodel
1、可进行双向绑定
2、代码减少，对代码瘦身
4使用vue将下列data中cat的几条属性插入到页面之中

var vm = {
	el: '#app',
	data: {
		cat: {
			name: '罗小黑',
			age: 8,
			desc: '是一只黑色的猫'
		}
	}
12345678910
效果如下：

//在html文件中加入如下代码
<div id="app">
	<P>姓名：{{name}}<br>
	   年龄：{{age}}<br>
	   描述：{{desc}}
	</p>
</div>

5、使用vue，完成一个计算器功能。
要求如下：

符号通过下拉框选择
点击计算能根据输入值以及所选运算符算出结果显示在第三个文本框中。

+ <!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" />
			<button type="button" value="计算" @click="calculate">计算</button>
			<input type="text" v-bind:value="res" />
		</div>
		<script src="./js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data : {
					a : '',
					b : '',
					c : '',
					res : ''
				},
				methods:{
					calculate() {
						if(this.c=="+") {
							this.res = parseInt(this.a) + parseInt(this.b)
						}
						if(this.c=="-") {
							this.res = parseInt(this.a) - parseInt(this.b)
						}
						if(this.c=="*") {
							this.res = parseInt(this.a) * parseInt(this.b)
						}
						if(this.c=="/") {
							this.res = parseInt(this.a) / parseInt(this.b)
						}
					}
				}
			})
		</script>
	</body>
</html>

weixin_45838685

关注

0
点赞
踩
0

收藏

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

11.4作业1、总结一下v-text和v-html和插值表达式的差别答： v-text，将数据中内容以文本格式写入到视图中v-html，将数据中内容以HTML代码的形式渲染到视图中2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值 Title 我是天才 3、什么是...
复制链接

扫一扫