作业_11.4

最新推荐文章于 2023-11-14 20:51:56 发布

dd_dc

最新推荐文章于 2023-11-14 20:51:56 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/dd_dc/article/details/102920141

版权

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

		v-text：将文本中的内容覆盖写入原有的文本中
		v-html：将文本中的html的代码渲染到原有的文本中
		插值是在原有的文本基础上进行添加

List item

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

	     插值：<div id="app">{{msg}}</div>
	     v-text：<div id="app" v-text="msg">111</div>
	     v-html：<div id="app" v-html="msg2">111</div>
	     <script>
	        var vm= new Vue({
	          el:'#app',
	          data:{
	          	msg:"hello world!"
	          	msg2:"<h1>hello world!</h1>"
	        	}
	         });
	      </script>

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

		M为数据，模型被用于展示在视图之中，V为视图，VM为j监视器，监视数据和视图的变化，并将变化反馈到另一方

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

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

使用vue，完成一个计算器功能。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		<input type="text" v-model="m1">
		<select v-model="fh">
		        <option value="+">+</option>
		        <option value="-">-</option>
		        <option value="*">*</option>
		        <option value="/">/</option>
		</select>
		<input type="text" v-model="m2" >
		<button type="button" @click="js">计算</button>
		<input type="text" :value="result" >
		</div>
		
		<script >
			var vm=new Vue({
				el:"#app",
				data:{
					fh:'+',
					m1:0,
					m2:0,
					result:0
				},
				methods:{
					js(){
						this.m1=parseInt(this.m1);
						this.m2=parseInt(this.m2);
						if(this.fh == "+" ){
							 this.result=this.m1+this.m2;
						}
						if(this.fh == "-"){
							this.result=this.m1-this.m2;
						}
						if(this.fh == "*"){
							this.result=this.m1*this.m2;
						}
						if(this.fh == "/"){
							this.result=this.m1/this.m2;
						}
					}
				}
			});
		</script>
	</body>
</html>

dd_dc

关注

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的值插值：<div id="app...
复制链接

扫一扫