作业11.4

最新推荐文章于 2020-01-10 18:50:16 发布

weixin_39546343

最新推荐文章于 2020-01-10 18:50:16 发布

阅读量121

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_39546343/article/details/102919753

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

插值表达式可以根据内容自行插入
v-text 是覆盖是写入，以文本写到标签内容
v-html 是覆盖是写入，以html代码渲染到标签内容

创建一个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 src="js/vue.js"></script>
<script>
	var vm=new Vue({
		el:"#app",
		data:{
			msg:"hello world"
		}
	})
</script>

什么是MVVM模式，这样设计有什么优点

/*Vue框架的几个关键角色：
* 1、视图，往往是一个div，View
* 2、数据，数据被用于展示在视图div之中， Model
* 3、监视者，即由Vue创建出来的vm对象，它的作用是，监视数据和视图的变化，并将变化反应到另一方VM
* 这三者组合起来，叫做mv vm设计模式。
* */

使用vue将下列data中cat的几条属性插入到页面之中

<div>
<p>姓名:{{cat.name}}</p>
<p>年龄:{{cat.age}}</p>
<p>描述:{{cat.desc}}</p>
</div>

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

使用vue，完成一个计算器功能。
在这里插入图片描述

要求如下：

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<div id="app">
	<input type="text" v-model="a">
	<select name="" id="" v-model="fh">
    	<option value="+">+</option>
    	<option value="-">-</option>
    	<option value="*">*</option>
    	<option value="/">/</option>
	</select>
	<input type="text" v-model="b">
	<button @click="calc">计算</button>
	<input type="text" v-model="c">
</div>
<script src="../js/vue.js"></script>
<script>
	var vm = new Vue({
    	el: "#app",
    	data: {
        	a: null,
        	b: null,
        	c: null,
        	fh: '+'
    	},
    	methods: {
        	calc() {
            	this.a=parseInt(this.a);
            	this.b=parseInt(this.b);
            	if (this.fh == '+') {
                	this.c = this.a + this.b;
            	}else if (this.fh == '-') {
                	this.c = this.a - this.b;
            	}else if (this.fh == '*') {
                	this.c = this.a * this.b;
            	}else{
                	this.c = this.a / this.b;
            	}
        	}
    	}
	})
</script>
</body>
</html>

weixin_39546343

关注

0
点赞
踩
0

收藏

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

总结一下v-text和v-html和插值表达式的差别v-text 是覆盖是写入，以文本写到标签内容v-html 是覆盖是写入，以html代码渲染到标签内容创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值<div id="app"><p>{{msg}}</p><p...
复制链接

扫一扫