day01作业

最新推荐文章于 2020-10-17 20:16:05 发布

kiyomibaby

最新推荐文章于 2020-10-17 20:16:05 发布

阅读量105

点赞数

文章标签：作业

本文链接：https://blog.csdn.net/kiyomibaby/article/details/102918434

版权

题目：
1、总结一下v-text和v-html和插值表达式的差别
2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值
3、什么是MVVM模式，这样设计有什么优点
4、使用vue将下列data中cat的几条属性插入到页面之中// 代码var vm = { el: '#app', data: { cat: { name: '罗小黑', age: 8, desc: '是一只黑色的猫' }
5、使用vue，完成一个计算器功能。要求如下：+ 符号通过下拉框选择+ 点击计算能根据输入值以及所选运算符算出结果显示在第三个文本框中。在这里插入图片描述

答：
1、v-text用于渲染普通文本，无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。如果你想输出真正的 HTML，你需要使用 v-html指令，v-text仅渲染标签，不能解析 HTML 代码。
2

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

3
MVVM是Model-View-ViewModel的简写

主要目的是分离视图（View）和模型（Model）
视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 
 
 <body>
 <div id="app">
  <input type="text" v-model="a">
  <select name="" id="" 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" v-bind:value="result">
 </div> 
    <script src="js/vue.js"></script>
 <script>
  var vm =new Vue({
   el:'#app',
   data:{
    a:" ",//第一个操作数
    b:" ",//操作符
    c:" ",//第二个操作数
    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>