由星座判断引发我对vue.js的思考问题的模式的基本启示

最新推荐文章于 2024-04-19 14:34:17 发布

周行知

最新推荐文章于 2024-04-19 14:34:17 发布

阅读量511

点赞数

分类专栏：前端的思维方法

本文链接：https://blog.csdn.net/baidu_36681154/article/details/77790823

版权

前端的思维方法专栏收录该内容

16 篇文章 0 订阅

订阅专栏

首先大家可以看下面代码，也可以自己写上

css部分：

.search_box{
width:500px;
height:50px;
margin: 100px auto 0;
background-color:pink;
text-align: center;
border: 1px solid red;

line-height: 50px;
}
.xingzuo{
text-align:center;
}

html部分：

<div id="demo">
<div class="search_box">
请输入您的星座:<input type="text" id="xingzuo" />
<input type="button" value="确定" />

</div>
<div class="xingzuo"">

</div>
</div>
现在我们有一需求，就是当在文本框输入水平座时， div的class属性为xingzuo会显示水平座，输入金牛座，就会显示金牛座的图片

第一步我们必须分类分解释需求

首先我们第一个需求是文本框输入也就是输入是文本，那么input里面应该很简单，v-text或者v-html

第二我们第二个需求是我们得点击button才会发生，所以我们应该在button里面写入一个事件叫做v-on:click="onButton"

第三个需求则是divclass是xingzuo,既然是图片那么必然选择v-html,

第四分析它们之间的关系

输入：input id xingzuo -->onButton-->输出：div class xingzuo

这说明输入不能单纯的文本输入，而必须要通过绑定div class xingzuo才可以

这样我们就可以得出一张表

input id :xingzuo v-model="text"

input type:button v-on:click="onButton"

div class:xingzuo v-html: imgsrc="xxx"

直接写入html如下：

<div id="demo">
<div class="search_box">
请输入您的星座:<input type="text" id="xingzuo" v-model="text"/>
<input type="button" value="确定" v-on:click="onButton"/>

</div>
<div class="xingzuo" v-html="img">

</div>
</div>
然后我们再来分析Vue这一层：new Vue({});

eg1: el："#demo"//这比较简单

eg2: 这里按表来写，如果你真不知道写，你就看它写进去行不行，不行就排除

data:{
text:'',
img:''

},

eg3:你的设想所有情况的发生

输入是：水平金牛输出：水平的img 金牛的img

想不出，设想只有水平的一种情况

if(this.text=="水平座"){

this.img="<img src="xxx.png"/>”

}

金牛以此类推

else if(金牛){

金牛img

}

最后想一想有没有更为简化的写法

for while switch等语句哪个像if else if语句，，对比可得：switch语句

methods:{
onButton:function(){

switch(this.text){
case '水平座':

this.img="<img src='http://static.xingzuo123.com/uploads/allimg/160116/1_160116120256_1.jpg'/>";
break ;

case '双子座':

this.img="<img src='http://static.xingzuo123.com/uploads/allimg/160116/1_160116120256_2.jpg'/>";
break ;

case '巨蟹座':

this.img="<img src='img/vue2.jpg'/>";
break ;
default:
this.img='请输入其他星座';
break;

}

}

}

因而整个代码剖析：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星座判断</title>
<script src="js/vue.min.js"></script>
<style>

.search_box{
width:500px;
height:50px;
margin: 100px auto 0;
background-color:pink;
text-align: center;
border: 1px solid red;

line-height: 50px;
}
.xingzuo{
text-align:center;
}
</style>

</head>
<body>
<div id="demo">
<div class="search_box">
请输入您的星座:<input type="text" id="xingzuo" v-model="text"/>
<input type="button" value="确定" v-on:click="onButton"/>

</div>
<div class="xingzuo" v-html="img">

</div>
</div>

<script>

var app=new Vue({

el:"#demo",
data:{
text:'',
img:''

},
methods:{
onButton:function(){

switch(this.text){
case '水平座':

this.img="<img src='http://static.xingzuo123.com/uploads/allimg/160116/1_160116120256_1.jpg'/>";
break ;

case '双子座':

this.img="<img src='http://static.xingzuo123.com/uploads/allimg/160116/1_160116120256_2.jpg'/>";
break ;

case '巨蟹座':

this.img="<img src='img/vue2.jpg'/>";
break ;
default:
this.img='请输入其他星座';
break;

}

}

}

});

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