vue期末模拟题

input 

<template>
 <div>
    <div id="search">
        <div class="goods">产品名称</div>
        <div><input type="text" placeholder="请输入产品名称" v-model="name" ></div><br>
      
    </div>
    <div id="error">{{errmsg}}</div>
    <div id="submit"><input type="button" value="录入"  @click="info"></div>
 </div>
</template>

<script>
 export default {
 data () {
  
 return {
    name:'',
    errmsg:''

  }
 },
 methods:{
    info(){
       
        if(this.name==""){
       this.errmsg='请输入'
        }
      else if(/\d/.test(this.name)){
       this.errmsg='输入不能为数字'
       }
       else{
        this.$router.push('/product')
       }
    }

 }
}

</script>
<style scoped>
* {
    padding: 0;
    margin: 0;
}
.goods{

}

div {
    font-size: 14px;
}

#search input {
    width: 150px;
    text-align: left;
    margin-left: 10px;
}

#search div {
   
    width: 100px;
    text-align: right;
    display: inline-block;
    padding-right:10px;
    /*  产品名称文字到右边文本框的间距为10px；*/
}
/*first-*/
#search div :first-child{
    float :left;
}

#submit,
#submit input {
    display: inline-block;
    width: 330px;
}

#error {
    color: red;
}
</style>

product

<template>
    <div>
        <div><input type="text" id="product" placeholder="请输入产品名称" v-model="productName"> <input type="button" id="search" value="搜索" ></div>
        <div id="product"></div>
        <tr>
            <th>图像</th>
            <th>品牌</th>
            <th>链接</th>
            <th>价格</th>
        </tr>
        <tr v-for="item in products" :key="item">
            <td><img :src='"http://114.67.241.121:8080/img/" + item.image' ></td>
                    <td>{{ item.brand }}</td>
                    <td> <a :href='"http://114.67.241.121:8080/img/" + item.image'> {{ item.model }}</a></td>
                    <td>{{ item.price }}</td>
        </tr>

    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'Product',

    data() {
        return {
            
            products:[]

        };
    },

    mounted() {
        
       
     

     axios.get('http://114.67.241.121:8080/product/list', {
       params: {
        
       }
       }).then(response => {
           if (response.data.code === 200) {
           console.log(response.data)
         this.products = response.data.data;
         this.errorMsg = '';
       } else {
         this.products = [];
         this.errorMsg = response.data.msg;
       }
     }).catch(error => {
       this.products = [];
       this.errorMsg = '服务器错误，请稍后再试。';
       console.log(error);
     });
       }
       

    
    
};
</script>



</script>
<style scoped>
table{
    border: 1px solid #000;
    border-collapse: collapse;
    width: 550px;
}
th{
    height: 30px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #000;
}
td{
    height: 100px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #000;
}
img{
    height: 100px;
    width: 100px;
}
a{
    color: #00ff00;
}
a:hover{
    color: #ff0000;
}

tr th:nth-child(4){
    background-color: #ffffd0;
}
tr td:nth-child(4){
    background-color: #ffffd0;
}

tr th:nth-child(1){
   width: 100px;
}
tr th:nth-child(2){
   width: 150px;
}

tr th:nth-child(4){
   width: 150px;
}

</style>

input.css