实训DAY01work

最新推荐文章于 2019-11-05 23:09:24 发布

QIJIEJIU

最新推荐文章于 2019-11-05 23:09:24 发布

阅读量162

点赞数

文章标签：作业

本文链接：https://blog.csdn.net/QIJIEJIU/article/details/102924360

版权

1、总结一下v-text和v-html和插值表达式的差别
v-text,只能将文本表示出来
v-html,可以将文本以HTML的形式表达出来

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="work1">
			<p>表情: {{sticker}}</p>
			<p v-text="sticker">(.jpg)</p>
			<p v-html="sticker">(.jpg)</p>
		</div>
		<script >
			var vm=new Vue({
				el: '#work1',
				data: {
					sticker:"(嚣张.jpg)",
				}
			})
		</script>
	</body>
</html>

3、什么是MVVM模式，这样设计有什么优点
Vue框架几个关键角色：
1.视图标签往往是一个div,View
2.数据，数据被用于展示在视图div之中,Model
3.监视者，即由Vue创建出来的vm对象，它的作用是,监视数据和视图的变化，并将变化反应到另一方VM
这三者组合起来，叫做mv vm设计模式
优点：1.低耦合2.可重用性3.独立开发4.可测试
4、使用vue将下列data中cat的几条属性插入到页面之中

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="work2">
			<p>姓名: {{cat.name}}</p>
			<p>年龄: {{cat.age}}</p>
			<p>描述: {{cat.desc}}</p>
		</div>
		<script >
			var vm=new Vue({
				el: '#work2',
				data: {
					cat:{
						name: '罗小黑',
						age: 8,
						desc: '是一只黑色的猫',
					}
				}
			});
		</script>
	</body>
</html>

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="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" :value="result">
		</div>
		<script >
		var vm=new Vue({
			el: '#app',
			data: {
				a: '',//第一个操作数
				c: '',//操作符
				b: '',//第二个操作数
				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>
</html>

QIJIEJIU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实训DAY01work

1、总结一下v-text和v-html和插值表达式的差别v-text,只能将文本表示出来v-html,可以将文本以HTML的形式表达出来2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值<!DOCTYPE html><html> <head> <meta c...
复制链接

扫一扫