vue day01
程序员文章站
2022-06-08 13:14:41
...
11.4作业
1、总结一下v-text和v-html和插值表达式的差别
v-text，将数据中内容以文本格式写入到视图中
v-html，将数据中内容以HTML代码的形式渲染到视图中
2、创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值
// An highlighted block
<!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的几条属性插入到页面之中
// An highlighted block
var vm = {
el: '#app',
data: {
cat: {
name: '罗小黑',
age: 8,
desc: '是一只黑色的猫'
}
}
效果如下：
//在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>
上一篇： 软文写作培训：营销软文的五要素