油专复习balabala

最新推荐文章于 2024-09-08 13:23:35 发布

爱吃代码的JISOO

最新推荐文章于 2024-09-08 13:23:35 发布

阅读量92

点赞数

文章标签： json javascript html

本文链接：https://blog.csdn.net/qq_52807869/article/details/130323981

版权

该代码示例展示了一个Vue.js组件，用于用户输入产品名称并进行验证。如果输入为空或包含数字，会显示错误信息；否则，将重定向到产品页面。另外，还包含了一个获取产品列表的HTTP请求，展示在表格中，包括品牌、型号和价格。

摘要由CSDN通过智能技术生成

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

    </div>
</template>

<script>
import '../assets/input.css'
export default {
    data() {
        return {
            name:"",
            errormsg:""
        }
    },
    methods:{
        checkdata(){
            if(this.name==""){
                this.errormsg="产品名称必须输入"
            }
            else if(/\d/.test(this.name)){
                this.errormsg="产品名称中不能有数字"
            }
            else{
                this.$router.push("/product")
            }

        }

    }
}

</script>
<style scoped>
#search div:first-child{
    float: left;
    width: 100px;
    margin-right: 10px;
    text-align: right;
}
#submit input{
    width: 268px;
}
#error{
    color: #ff0000;
}
</style>

========================================================================

<template>
    <div>
        <div><input type="text" id="product" placeholder="请输入产品名称">
            <input type="button" id="search" value="搜索" @click="getData">
        </div>
        <!-- 增加vue -->
        <div id="product">
            <table>
                <tr>
                    <th></th>
                    <th>品牌</th>
                    <th>型号</th>
                    <th>价格</th>
                </tr>
                <tr v-for="item in list">
                    <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>
            </table>
            <!-- end vue -->
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: []
        }
    },
    methods: {
        getData() {
            this.axios({
                method: "get",
                url: "http://114.67.241.121:8080/product/list"
            }).then(res => {
                console.log(res)
                this.list = res.data.data
            })
        }
    }
}

</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 {
    width: 100px;
    height: 100px;
}
a{
    color:#00ff00;
}
a:hover{
    color:#ff0000;
}
tr th:nth-child(1){
    width: 100px;
}
tr th:nth-child(2){
    width: 150px;
}
tr th:nth-child(4){
    width: 150px;
    background-color: #ffffd0;
}
tr td:nth-child(4){
    background-color: #ffffd0;
}
</style>