11.4作业
1、总结一下v-text和v-html和插值表达式的差别
答: v-text,将数据中内容以文本格式写入到视图中
v-html,将数据中内容以HTML代码的形式渲染到视图中
2、创建一个vue对象并和视图进行绑定,然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<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: ”你好世界”
}
})
</script>
</body>
</html>
3、什么是MVVM模式,这样设计有什么优点
M:Model V:View VM:viewmodel
1、可进行双向绑定
2、代码减少,对代码瘦身
4使用vue将下列data中cat的几条属性插入到页面之中
var vm = {
el: '#app',
data: {
cat: {
name: '罗小黑',
age: 8,
desc: '是一只黑色的猫'
}
}
12345678910
效果如下:
//在html文件中加入如下代码
<div id="app">
<P>姓名:{{name}}<br>
年龄:{{age}}<br>
描述:{{desc}}
</p>
</div>
5、使用vue,完成一个计算器功能。
要求如下:
- 符号通过下拉框选择
- 点击计算能根据输入值以及所选运算符算出结果显示在第三个文本框中。
+ <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="a" />
<select v-model="c">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="b" />
<button type="button" value="计算" @click="calculate">计算</button>
<input type="text" v-bind:value="res" />
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data : {
a : '',
b : '',
c : '',
res : ''
},
methods:{
calculate() {
if(this.c=="+") {
this.res = parseInt(this.a) + parseInt(this.b)
}
if(this.c=="-") {
this.res = parseInt(this.a) - parseInt(this.b)
}
if(this.c=="*") {
this.res = parseInt(this.a) * parseInt(this.b)
}
if(this.c=="/") {
this.res = parseInt(this.a) / parseInt(this.b)
}
}
}
})
</script>
</body>
</html>