HTML表格标签、列表标签和表单标签-程序员宅基地

技术标签: html5  前端  前端基础  html  

目录

表格标签

表格的主要作用

表格的基本语法

表头单元格标签

表格外观属性

设计表格的思路

表格标签结构

合并单元格属性

列表标签

无序列表

有序列表

自定义列表

表单标签

表单域

表单控件

button与text

password

reset与submit

checkbox与radio

label标签

checked属性和maxlength属性

选择表单元素

文本区域表单元素


表格标签

表格的主要作用

  1. 表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理
  2. 表格不是用来布局页面的,而是用来展示数据的。

表格的基本语法

<table>
    <tr>
        <td>
        </td>
    </tr>
</table>
  1. <table> </table> 是用于定义表格的标签
  2. <tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中。
  3. <td> </td> 用于定义表格中的单元格(字母 td 指表格数据(table data),即数据单元格的内容),必须嵌套在<tr></tr>标签中。

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <!-- 创建一个三行(两个tr标签)两列(每一个tr标签中两个td标签)的表格 -->
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>女</td>
        </tr>
    </table>
</body>
</html>

效果如下:

表头单元格标签

在HTML中,可以使用<th></th>标签指定表头(标题单元格)

一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示<th> 标签表示 HTML 表格的表头部分(table head 的缩写)

<th></th>也必须放置到<table></table>标签中,与<td></td>标签并列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <!-- 创建一个三行(两个tr标签)两列(每一个tr标签中两个td标签)的表格 -->
    <table>
        <tr>
            <!-- 表头标签 -->
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>女</td>
        </tr>
    </table>
</body>
</html>

效果如下:

表格外观属性

表格标签这部分属性我们实际开发我们不常用,后面通过 CSS 来设置

属性名

属性值

描述

align

left/center/right

规定表格相对周围元素的对齐方式

border

1或""

规定表格单元格是否带有边框,默认""(表示没有边框)

cellpadding

像素值

规定单元格边沿与其内容之间的空白,默认1像素

cellspacing

像素值

规定单元格之间的空白,默认2像素

width

像素值与百分比

规定表格的宽度

height

像素值与百分比

规定表格的高度

cellpadding设置的区域介绍:

cellspacing设置的区域介绍:

注意,上面的属性必须写在<table></table>的第一个标签<table>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <!-- 创建一个三行(两个tr标签)两列(每一个tr标签中两个td标签)的表格 -->
    <!-- 将表格居中对齐,并将边框设置为4, cellpadding和cellspacing设置为0,高度和宽度为300-->
    <table align="center" border="4" cellpadding="0" cellspacing="0" height="300" width="300">
        <tr>
            <!-- 表头标签 -->
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>女</td>
        </tr>
    </table>
</body>
</html>

效果如下:

设计表格的思路

先制作表格的结构

1.第一行里面是 <th></th> 表头单元格

2.第二行开始里面是 <td></td> 普通单元格单元格里面可以放任何元素

3.文字链接图片等都可以

后书写表格属性

1.用到宽度高度边框cellpaddingcellspacing

2.表格浏览器中对齐 align

表格标签结构

因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分

在表格标签中,分别用:<thead></thead>标签表格的头部区域、<tbody></tbody>标签表格的主体区域. 这样可以更好的分清表格结构

例如上面的代码可以将姓名和性别设置为表头区域,将内容设置为主体区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <!-- 创建一个三行(两个tr标签)两列(每一个tr标签中两个td标签)的表格 -->
    <!-- 将表格居中对齐,并将边框设置为4, cellpadding和cellspacing设置为0,高度和宽度为300-->
    <table align="center" border="4" cellpadding="0" cellspacing="0" height="300" width="300">
    <thead>
        <tr>
            <!-- 表头标签 -->
            <th>姓名</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小王</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>女</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

合并单元格属性

在HTML中,可以使用两个属性控制单元格的合并:

  1. rowspan(跨行合并):rowspan="合并单元格的个数",最上侧单元格为起始单元格, 写合并属性,删除除起始单元格以外的单元格
  2. colspan(跨列合并):colspan="合并单元格的个数",最左侧单元格为起始单元格, 写合并代码,删除除起始单元格以外的单元格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>
<body>
    <!-- 创建三行三列的单元格 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0" height="300" width="300">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>    
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果如下:

  • 合并第一行的第二个和第三个单元格(跨列合并)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>
<body>
    <!-- 创建三行三列的单元格 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0" height="300" width="300">
        <thead>
            <tr>
                <th></th>
                <th colspan="2"></th>
                <!-- 删除下面的标签 -->
                <!-- <th></th> -->
            </tr>
        </thead>    
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果如下:

  • 合并第一列第二行和第三行的单元格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>
<body>
    <!-- 创建三行三列的单元格 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0" height="300" width="300">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>    
        <tbody>
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <!-- 删除下面的标签 -->
                <!-- <td></td> -->
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果如下:

列表标签

在HTML中,表格一般用来显示数据,而列表一般用来布局

列表最大的特点是整齐、整洁、有序,所以它作为布局会更加自由和方便

列表有以下三个分类:

  1. 无序列表
  2. 有序列表
  3. 自定义列表

无序列表

在HTML中,使用<ul></ul>标签代表无序列表

一般会以项目符号呈现列表项,而列表项使用 <li></li> 标签定义。

无序列表的基本语法格式如下:

<ul>
    <li>
    </li>
<ul>
  1. 无序列表的各个列表项之间没有顺序级别之分,是并列的。
  2. <ul></ul> 中只能嵌套 <li></li>,直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的
  3. <li></li> 之间相当于一个容器,可以容纳所有元素。
  4. 无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签</title>
</head>

<body>
    <ul>
        <li>
            列表标签1
        </li>
        <li>
            列表标签2
        </li>
        <li>
            列表标签3
        </li>
    </ul>
</body>

</html>

效果如下:

有序列表

有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义

在HTML中,使用<ol></ol>表示有序列表,列表排序以数字来显示,并且使用 <li></li> 标签来定义列表项。有序列表的基本语法格式如下:

<ol>
    <!-- 列表标签1 -->
    <li>
    </li>
    <!-- 列表标签2 -->
    <li>
    </li>
    <!-- 列表标签3 -->
    <li>
    </li>
</ol>
  1. <ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li></li>之间相当于一个容器,可以容纳所有元素。
  3. 有序列表会带有自己样式属性,但在实际使用时,我们会使用 CSS 来设置。

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>

<body>
    <ol>
        <li>
            列表标签1
        </li>
        <li>
            列表标签2
        </li>
        <li>
            列表标签3
        </li>
    </ol>
</body>

</html>

效果如下:

自定义列表

自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。

在 HTML 标签中,<dl></dl>标签用于定义描述列表(或定义列表),该标签会与 <dt></dt>(定义项目/名字)和 <dd></dd>(描述每一个项目/名字)一起使用。语法如下:

<dl>
    <!-- 列表名称 -->
    <dt>
    </dt>
    <!-- 列表描述 -->
    <dd>
    </dd>
</dl>

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表</title>
</head>

<body>
    <dl>
        <dt>
            列表名称
        </dt>
        <dd>
            列表描述1
        </dd>
        <dd>
            列表描述2
        </dd>
        <dd>
            列表描述3
        </dd>
    </dl>
</body>

</html>

效果如下:

表单标签

使用表单目的是为了收集用户信息。在网页中, 当需要跟用户进行交互,收集用户资料时,就需要表单。

在 HTML 中,一个完整的表单通常由3个部分构成

  1. 表单域
  2. 表单控件(也称为表单元素)
  3. 提示信息

表单域

表单域是一个包含表单元素的区域。

在 HTML 标签中, <form></form> 标签用于定义表单域,以实现用户信息的收集和传递。

<form></form> 会把它范围内的表单元素信息提交给服务器

实现代码:

<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>

在上面的代码中:

表单属性

属性值

作用

action

url地址

用于指定接收并处理表单数据的服务器程序的url地址

method

get/post

用于设置表单数据的提交方式

name

名称

用于指定表单的名称,以区分同一个页面中的多个表单域

表单控件

<input />表单元素

在表单元素中 <input /> 标签用于收集用户信息。在 <input /> 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)

<input type="属性值"  />

<input /> 标签为单标签 type 属性设置不同的属性值用来指定不同的控件类型

type 属性的属性值及其描述如下:

属性值

描述

button

定义可点击按钮,多数通过JavaScript启动脚本

checkbox

定义复选框

file

定义输入字段和"浏览"按钮,供文件上传

hidden

定义隐藏的输入字段

image

定义图像形式的提交按钮

password

定义密码字段。该字设中的字符被掩码

radio

定义单选按钮

reset

定义重置按钮。重置按钮会清除表单中的所有数据

submit

定义提交按钮。提交按钮会把表单数据发送到服务器

text

定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符

type 属性外,<input>标签还有其他很多属性,其常用属性如下:

属性

属性值

描述

name

用户自定义

定义input元素的名称

value

用户自定义

规定input元素的值(文本框/按钮(除单选按钮和复选框)为默认显示的内容)

checked

checked

规定此input元素首次加载时应当被选中

maxlength

正整数

规定输入字段中的字符的最大长度

buttontext

  • 创建一个获取手机验证码的按钮
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>

<body>
    <form>
        <input type="text" value="请输入验证码" />
        <input type="button" value="获取验证码" />
    </form>
</body>

</html>

效果如下:

password

password值和text值的不同点:password不会回显输入的内容,text会回显输入的内容

  • 创建一个密码输入框
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>

<body>
    <form>
        请输入密码:<input type="password" />
    </form>
</body>

</html>

效果如下:

resetsubmit

  • 创建一个提交按钮和一个重置表单输入按钮
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>

<body>
    <form>
        请输入密码:<input type="password" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>

</html>

效果如下:

checkboxradio

  • 创建三个兴趣爱好复选框以及一对性别选项框,结合一个姓名输入框和提交与重置按钮
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>

<body>
    <form>
        姓名:<input type="text" value="请输入姓名"><br />
        你的性别是:<br />
        男:<input type="radio" name="gender" value="男">
        女:<input type="radio" name="gender" value="女">
        <br />
        你的爱好是:<br />
        <input type="checkbox" name="hobby" value="打篮球">打篮球
        <input type="checkbox" name="hobby" value="踢足球">踢足球
        <input type="checkbox" name="hobby" value="打羽毛球">打羽毛球
        <input type="checkbox" name="hobby" value="丢飞盘">丢飞盘
        <br />
        <input type="submit" value="提交你的信息">
        <input type="reset" value="重置你的信息">
    </form>
</body>

</html>

效果如下:

注意单选和复选框时,两个单选框必须保证name值相同才能实现单选的效果,多选框必须保证name值相同才会被视为同一类

label标签

在上面的选择文本框或者点击选择按钮过程中只能点击对应的区域,点击其他区域并没有任何效果,所以为了更好的交互性,可以为文本框或者选择按钮的描述信息添加联系

<label></label> 标签为 input 元素定义标注(标签)。<label></label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.语法:

<label for="sex">男</label>    
<input type="radio" name="sex" id="sex" />

注意:<label> 标签的 for 属性应当与相关元素的 id 属性相同

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label标签和表单标签</title>
</head>

<body>
    <form>
       <!-- 将姓名与文本框联系 -->    
        <label for="姓名">姓名:</label>
        <input type="text" value="请输入姓名" id="姓名"><br />
        你的性别是:<br />
        <!-- 将男和女与选择按钮联系 -->
        <label for="男">男:</label>
        <input type="radio" name="gender" value="男" id="男">
        <label for="女">女:</label>
        <input type="radio" name="gender" value="女" id="女">
        <br />
        你的爱好是:<br />
        <!-- 将爱好与选择按钮联系 -->
        <label for="打篮球">打篮球</label>
        <input type="checkbox" name="hobby" value="打篮球" id="打篮球">
        <label for="踢足球">踢足球</label>
        <input type="checkbox" name="hobby" value="踢足球" id="踢足球">
        <label for="打羽毛球">打羽毛球</label>
        <input type="checkbox" name="hobby" value="打羽毛球" id="打羽毛球">
        <label for="丢飞盘">丢飞盘</label>
        <input type="checkbox" name="hobby" value="丢飞盘" id="丢飞盘">
        <br />
        <input type="submit" value="提交你的信息">
        <input type="reset" value="重置你的信息">
    </form>
</body>

</html>

checked属性和maxlength属性

  • 实现当页面第一次加载时性别默认选择为“男”,对于文本框默认限制个数为6个
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label标签和表单标签</title>
</head>

<body>
    <form>
        <label for="姓名">姓名:</label>
        <!-- 最多输入6个字符 -->
        <input type="text" value="请输入姓名" id="姓名" maxlength="6"><br />
        你的性别是:<br />
        <label for="男">男:</label>
        <!-- 默认选择男 -->
        <input type="radio" name="gender" value="男" id="男" checked="checked">
        <label for="女">女:</label>
        <input type="radio" name="gender" value="女" id="女">
        <br />
        你的爱好是:<br />
        <label for="打篮球">打篮球</label>
        <input type="checkbox" name="hobby" value="打篮球" id="打篮球">
        <label for="踢足球">踢足球</label>
        <input type="checkbox" name="hobby" value="踢足球" id="踢足球">
        <label for="打羽毛球">打羽毛球</label>
        <input type="checkbox" name="hobby" value="打羽毛球" id="打羽毛球">
        <label for="丢飞盘">丢飞盘</label>
        <input type="checkbox" name="hobby" value="丢飞盘" id="丢飞盘">
        <br />
        <input type="submit" value="提交你的信息">
        <input type="reset" value="重置你的信息">
    </form>
</body>

</html>

效果如下:

选择表单元素

在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select></select>标签控件定义下拉列表

基本语法如下:

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select表单元素</title>
</head>
<body>
    <form>
        表单:
        <br />
        <select>
            <option>选项1</option> 
            <option>选项2</option>
            <option>选项3</option>
        </select>
    </form>
</body>
</html>

效果如下:

文本区域表单元素

当用户输入内容较多的情况下,就不能使用文本框表单了,此时我们可以使用 <textarea> 标签

  1. 在表单元素中,<textarea> </textarea>标签是用于定义多行文本输入的控件。
  2. 使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论

基本语法:

<textarea rows="3" cols="20">   文本内容 </textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ,rows=“显示的行数”,我们在实际开发中不会使用,都是用 CSS 来改变大小

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea表单元素</title>
</head>
<body>
    <form>
        <textarea cols="30" rows="10">请输入内容</textarea>
    </form>
</body>
</html>

效果如下:

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_73281594/article/details/137836957

智能推荐

hdu 1229 还是A+B(水)-程序员宅基地

文章浏览阅读122次。还是A+BTime Limit: 2000/1000 MS (Java/Others)Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 24568Accepted Submission(s): 11729Problem Description读入两个小于10000的正整数A和B,计算A+B。...

http客户端Feign——日志配置_feign 日志设置-程序员宅基地

文章浏览阅读419次。HEADERS:在BASIC的基础上,额外记录了请求和响应的头信息。FULL:记录所有请求和响应的明细,包括头信息、请求体、元数据。BASIC:仅记录请求的方法,URL以及响应状态码和执行时间。NONE:不记录任何日志信息,这是默认值。配置Feign日志有两种方式;方式二:java代码实现。注解中声明则代表某服务。方式一:配置文件方式。_feign 日志设置

[转载]将容器管理的持久性 Bean 用于面向服务的体系结构-程序员宅基地

文章浏览阅读155次。将容器管理的持久性 Bean 用于面向服务的体系结构本文将介绍如何使用 IBM WebSphere Process Server 对容器管理的持久性 (CMP) Bean的连接和持久性逻辑加以控制,使其可以存储在非关系数据库..._javax.ejb.objectnotfoundexception: no such entity!

基础java练习题(递归)_java 递归例题-程序员宅基地

文章浏览阅读1.5k次。基础java练习题一、递归实现跳台阶从第一级跳到第n级,有多少种跳法一次可跳一级,也可跳两级。还能跳三级import java.math.BigDecimal;import java.util.Scanner;public class Main{ public static void main(String[]args){ Scanner reader=new Scanner(System.in); while(reader.hasNext()){ _java 递归例题

面向对象程序设计(荣誉)实验一 String_对存储在string数组内的所有以字符‘a’开始并以字符‘e’结尾的单词做加密处理。-程序员宅基地

文章浏览阅读1.5k次,点赞6次,收藏6次。目录1.串应用- 计算一个串的最长的真前后缀题目描述输入输出样例输入样例输出题解2.字符串替换(string)题目描述输入输出样例输入样例输出题解3.可重叠子串 (Ver. I)题目描述输入输出样例输入样例输出题解4.字符串操作(string)题目描述输入输出样例输入样例输出题解1.串应用- 计算一个串的最长的真前后缀题目描述给定一个串,如ABCDAB,则ABCDAB的真前缀有:{ A, AB,ABC, ABCD, ABCDA }ABCDAB的真后缀有:{ B, AB,DAB, CDAB, BCDAB_对存储在string数组内的所有以字符‘a’开始并以字符‘e’结尾的单词做加密处理。

算法设计与问题求解/西安交通大学本科课程MOOC/C_算法设计与问题求解西安交通大学-程序员宅基地

文章浏览阅读68次。西安交通大学/算法设计与问题求解/树与二叉树/MOOC_算法设计与问题求解西安交通大学

随便推点

[Vue warn]: Computed property “totalPrice“ was assigned to but it has no setter._computed property "totalprice" was assigned to but-程序员宅基地

文章浏览阅读1.6k次。问题:在Vue项目中出现如下错误提示:[Vue warn]: Computed property "totalPrice" was assigned to but it has no setter. (found in <Anonymous>)代码:<input v-model="totalPrice"/>原因:v-model命令,因Vue 的双向数据绑定原理 , 会自动操作 totalPrice, 对其进行set 操作而 totalPrice 作为计..._computed property "totalprice" was assigned to but it has no setter.

basic1003-我要通过!13行搞定:也许是全网最奇葩解法_basic 1003 case 1-程序员宅基地

文章浏览阅读60次。十分暴力而简洁的解决方式:读取P和T的位置并自动生成唯一正确答案,将题给测点与之对比,不一样就给我爬!_basic 1003 case 1

服务器浏览war文件,详解将Web项目War包部署到Tomcat服务器基本步骤-程序员宅基地

文章浏览阅读422次。原标题:详解将Web项目War包部署到Tomcat服务器基本步骤详解将Web项目War包部署到Tomcat服务器基本步骤1 War包War包一般是在进行Web开发时,通常是一个网站Project下的所有源码的集合,里面包含前台HTML/CSS/JS的代码,也包含Java的代码。当开发人员在自己的开发机器上调试所有代码并通过后,为了交给测试人员测试和未来进行产品发布,都需要将开发人员的源码打包成Wa..._/opt/bosssoft/war/medical-web.war/web-inf/web.xml of module medical-web.war.

python组成三位无重复数字_python组合无重复三位数的实例-程序员宅基地

文章浏览阅读3k次,点赞3次,收藏13次。# -*- coding: utf-8 -*-# 简述:这里有四个数字,分别是:1、2、3、4#提问:能组成多少个互不相同且无重复数字的三位数?各是多少?def f(n):list=[]count=0for i in range(1,n+1):for j in range(1, n+1):for k in range(1, n+1):if i!=j and j!=k and i!=k:list.a..._python求从0到9任意组合成三位数数字不能重复并输出

ElementUl中的el-table怎样吧0和1改变为男和女_elementui table 性别-程序员宅基地

文章浏览阅读1k次,点赞3次,收藏2次。<el-table-column prop="studentSex" label="性别" :formatter="sex"></el-table-column>然后就在vue的methods中写方法就OK了methods: { sex(row,index){ if(row.studentSex == 1){ return '男'; }else{ return '女'; }..._elementui table 性别

java文件操作之移动文件到指定的目录_java中怎么将pro.txt移动到design_mode_code根目录下-程序员宅基地

文章浏览阅读1.1k次。java文件操作之移动文件到指定的目录_java中怎么将pro.txt移动到design_mode_code根目录下

推荐文章

热门文章

相关标签