作业11.4

最新推荐文章于 2020-01-10 19:29:47 发布

overtheones

最新推荐文章于 2020-01-10 19:29:47 发布

阅读量112

点赞数

文章标签： HTML VUE

本文链接：https://blog.csdn.net/overtheones/article/details/102925403

版权

总结一下v-text和v-html和插值表达式的差别
V-text:将M中的内容以文本格式写入到v中
V-html:将M中内容以HTML代码的形式渲染到v中

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

	<div id="app">
 		<!--将M中数据写入V的几种方式总结-->
 		<!--1、插值表达式-->
 		<p>消息：{{msg}}</p>
		<!--2、v-text，将M中内容以文本格式写入到V中-->
		<p v-text="msg">原来的内容</p>
		<!--3、v-html，将M中内容以HTML代码的形式渲染到V中-->
		<p v-html="msg">原来的内容</p>
		<!--总结：插值表达式是插入、v-text和v-html都是覆盖写入-->
	</div>
<script>
	var vm = new Vue({
    	el: "#app",
    	data: {
        	msg: "<h2>Hello World</h2>"
    	}
	});
</script>

什么是MVVM模式，这样设计有什么优点
视图数据监视者这三者组合起来就叫做MVVM模式
其优点是: 1低耦合 2可重用性 3独立开发 4可测试

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

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

使用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="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 src="js/vue.js"></script>
<script>
    /*对象语法{属性名:属性值, 属性名:属性值}*/
    var vm = new Vue({ // VM
        el: '#app', // V
        data: { // M
            a: '', // 第一个操作数
            c: '', // 操作符
            b: '', // 第二个操作数
            result: '',
        },
        methods: {
            calculate() {
                if (this.c == '+') {
                    /*弱变量类型和强变量类型语言的差异在于，能否进行隐式的类型转换*/
                    this.result = parseInt(this.a/1) + 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>

overtheones

关注

0
点赞
踩
0

收藏

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

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

扫一扫