vue day01

最新推荐文章于 2022-04-11 11:15:08 发布

一点江月

最新推荐文章于 2022-04-11 11:15:08 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/Jonny_cloud/article/details/102921799

版权

11.4作业

1、总结一下v-text和v-html和插值表达式的差别

		v-text，将数据中内容以文本格式写入到视图中
		v-html，将数据中内容以HTML代码的形式渲染到视图中

2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值

// An highlighted block
<!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的几条属性插入到页面之中

// An highlighted block
var vm = {
	el: '#app',
	data: {
		cat: {
			name: '罗小黑',
			age: 8,
			desc: '是一只黑色的猫'
		}
	}

效果如下：
在这里插入图片描述

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

一点江月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue day01

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

扫一扫