10.4作业tian

最新推荐文章于 2023-10-04 22:35:09 发布

weixin_45839691

最新推荐文章于 2023-10-04 22:35:09 发布

阅读量70

点赞数

本文链接：https://blog.csdn.net/weixin_45839691/article/details/102926193

版权

 1、总结一下v-text和v-html和插值表达式的差别
 	v-text只能识别字符
 	v-html可以识别标签

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

	<script src="js/vue.js"></script>
		<div id="app">
		    <p>{{msg}}</p>
		    <p v-text="msg"></p>
		    <p v-html="msg"></p>
		
		</div>
	<script>
		   var vm =new Vue({
		        el: '#app',
		        data: {
		          msg:"holle"
		        }
		    });

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

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

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

    </script>
</body>
</html>

 5、使用vue，完成一个计算器功能。
 		要求如下：
 		+ 符号通过下拉框选择
 		+ 点击计算能根据输入值以及所选运算符算出结果显示在第三个文本框中

			<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script src="js/vue.js">
</script>
<div id="app">
    <input type="text" v-model="a"/>

    <select v-model="b">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="c"/>
    <input type="button" value="计算" @click="calculate"/>
    <input type="text" :value="d"/>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            a:'',
            b:'',
            c:'',
            d:''
        },
        methods: {

            calculate:function(){
                if(this.b=='+'){
                    this.d=parseInt(this.a)+parseInt(this.c);
                }
                if(this.b=='-'){
                    this.d=parseInt(this.a)-parseInt(this.c);
                }
                if(this.b=='*'){
                    this.d=parseInt(this.a)*parseInt(this.c);
                } if(this.b=='/'){
                    this.d=parseInt(this.a)/parseInt(this.c);
                }


            }
        }
    })
</script>


</body>
</html>

weixin_45839691

关注

0
点赞
踩
0

收藏

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

1、总结一下v-text和v-html和插值表达式的差别 v-text只能识别字符 v-html可以识别标签 2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值 <script src="js/vue.js"></script> <div id="app"...
复制链接

扫一扫