vue的日常小练习

最新推荐文章于 2024-01-10 10:51:59 发布

雪蛋不是蛋(^_−)☆

最新推荐文章于 2024-01-10 10:51:59 发布

阅读量114

点赞数

分类专栏： web前端小可爱文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/qq_46291038/article/details/120365261

版权

web前端小可爱专栏收录该内容

28 篇文章 1 订阅

订阅专栏

源码：

<%--
  Created by IntelliJ IDEA.
  User: TJYSB
  Date: 2021/9/17
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加产品</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

</head>
<body>
    <h1>添加产品</h1>
    <div id="app" style=" width:800px;height: 1024px; border:1px solid green">
      请添加水果名称：<input id="shuiguoMing" type="text" placeholder="名称不能超过7个字符" v-model:value="zilength" @input="Cishu">
        <span v-model:value="zilength">字符长度是：{{zilength.length}}</span>

        <%--<div id="len" v-if="zilength.length > 7" v-model:value="zilength">--%>
            <%--<span style="color: #00FFFF">您的名称大于7，请重新输入名称！</span>--%>
        <%--</div>--%>

      <br>
        修改前值为：芒果，修改后值为： <br>
        <div>
                请添加水果价格：<input type="text" v-model:value="price">分 number <br>
                请添加水果数量：<input type="text" v-model:value="number">个
                <input type="button" value="-" @click="jian(number)">
                <input type="text" v-model:value="number">
                <input type="button" value="+" @click="jia(number)"><br>
                因为是number所以没有长度：{{number}}  <br>
                自动算水果价格：<span style="color: red">{{ price /100 * number }}</span> 元
        <br>
        </div>

        请添加水果简介：<br>
        <textarea name="" cols="25" rows="15"> </textarea>

        <br>
        <div id="boxzi">
            请添加水果有无包装盒：
            <input type="radio"  value="有" v-model="picked" >有
            <input type="radio" value="没有" v-model="picked">没有  &nbsp;
            <span>{{ picked }}</span>
        </div>

        <div>
        请添加水果状态（下拉）：
        <select id="" name="" v-on:click="showHuluWa()" v-model="selected">
            <option v-for="(item,index) in status" :key="status.id" v-bind:value="item.id">{{item.name}}</option>
        </select>
        选中的水果状态是：{{selected}} <br>
        </div>

        <div>
        请添加水果口味（多选）： <br>
        <input type="checkbox" value="1" v-model="checkedNames">酸甜  <br>
        <input type="checkbox"  value="2" v-model="checkedNames">酸   <br>
        <input type="checkbox"  value="3" v-model="checkedNames">甜   <br>
        <input type="checkbox"  value="4" v-model="checkedNames">苦涩   <br>
        <input type="checkbox"  value="5" v-model="checkedNames">臭中香如榴莲  <br>
        <span>选中的口味代码: {{ checkedNames }}</span>
        </div>

    </div>



<script>
    var vm=new Vue({
        el:'#app',
        data:{
            zilength:'',
            price:0,
            number:0,
            picked:'',
            status: [],
            selected:'',
            checkedNames: []
        },
        methods: {
            Cishu:function (zilength) {
                var i=this.zilength.length;
                if(i>7) {
                    alert("您的名称大于7，请重新输入名称！");
                    //页面刷新
                    location.reload();
                }
            },
            jia:function (number) {
                if(this.number >0) {
                    this.number++;
                }
            },
            jian:function (number) {
                if(this.number >0) {
                    this.number--;
                }
            },
            showHuluWa: function () {
                var arr=[
                    {
                        id: 1,
                        name: "新鲜"
                    },
                    {
                        id: 2,
                        name: "蔫了"
                    },
                    {
                        id: 3,
                        name: "腐烂"
                    }
                ];
                this.status=arr;
            }
        }
    })
</script>

</body>
</html>

效果图：

雪蛋不是蛋(^_−)☆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的日常小练习

源码：<%-- Created by IntelliJ IDEA. User: TJYSB Date: 2021/9/17 Time: 16:24 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head&gt
复制链接

扫一扫