标签：10000 attribute 51 link res var false message id
Attributes are additional information provided by HTML elements。
利用HTML的属性工具，就完全可以为网页开发，带来很多的属性，很多的功能添加，这样子网页就不显得那么土的了。
用Vue框架写前端代码
<template>
<div>
<!-- HTML样式CSS的直接写入 -->
<!-- 样式大包裹顶部 -->
<div style="background-color: DeepSkyBlue">
<p>前端页面展示学习</p>
<p>后端逻辑加入，以及前后端的打通连接起来</p>
<p>learn html</p>
<p>HTML基础程序封装 TestOne</p>
<h1>控软测试前端</h1>
<h2>前端知识点HTML复习</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<a href="https://www.runoob.com">这是一个链接</a>
<p>
每个表格从一个table标签开始<br />
每个表格行从tr标签开始 <br />
每个表格的数据从td标签开始
</p>
<!-- 标题 -->
<h4>一列：</h4>
<!-- 表格写入 -->
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<!-- 练习1 1列-->
<table border="1">
<tr>
<td>1000</td>
</tr>
</table>
<h4>一行3列</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<!-- -->
<h4>1行3列复习1</h4>
<table border="1">
<tr>
<td>1000</td>
<td>2000</td>
<td>3000</td>
</tr>
</table>
<h4>两行3列</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>2行3列复习1</h4>
<table border="5">
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>50</td>
<td>60</td>
</tr>
</table>
<!-- -->
<p>a标签定义一个超级链接</p>
<a href="https://www.inspur.com/">点击跳转到 浪潮官网</a><br />
<!-- 列表顶部 -->
<p>HTML 支持有序、无序和定义列表:</p>
<p>有序列表</p>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>tea</li>
</ol>
<ol start="9">
<li>咖啡</li>
<li>牛奶</li>
<li>tea</li>
</ol>
<h4>无序列表</h4>
<ul>
<li>tea</li>
<li>咖啡</li>
<li>牛奶</li>
</ul>
<!-- 列表底部 -->
<!-- 属性是 HTML元素提供的附加信息 -->
<!-- 属性实例 -->
<!-- 属性英文 attribute 额吹比由特 -->
<a href="https://www.inspur.com/"
>这是一个使用了a标签的链接。加入了href属性</a
>
<h2>html图像程序实例</h2>
<!-- 菜鸟路径有斜杠。自个的不用斜杠，才能显示。报错：要不然，加入斜杠不显示图片的。 -->
<img
border=""
src="img/11.jpg.jpg"
alt="11 rock"
width="505"
height="328"
/>
</div>
<!-- 样式大包裹底部 -->
<!-- 样式写入复习1 戊子日 -->
<div style="background-color: red">css样式测试盒子1</div>
<div style="background-color: black">盒子2</div>
<div style="background-color: NavyBlue">盒子3</div>
</div>
</template>
<script>
//复制JavaScript代码， 写接口代码去测试 辛巳日
import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module
import url from "@/plugins/urlHelper.js";
export default {
data() {
return {
editorConfig: {
initialFrameHeight: 500, //设置高度
initialFrameWidth: "100%", //设置宽度
UEDITOR_HOME_URL: url.getUEConfig(),
serverUrl: url.getUE(),
},
query: {}, //对象
loading: false,
currentPage4: 1,
pageSize: 10,
total: 0,
tableData: [],
form: {}, //表单对象
dialogVisible: false,
submiting: false,
id: 0,
domain: url.getDomain(),
};
},
components: {
VueUeditorWrap,
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.currentPage4 = 1;
this.getList();
},
handleCurrentChange(val) {
this.currentPage4 = val;
this.getList();
},
//筛选
filterTag(filter) {
var val = filter["isEnable"][0];
this.form.isEnable = val;
//刷新列表
this.getList();
},
//搜索查询
selList: function () {
this.currentPage4 = 1;
this.getList();
},
getList: function () {
var _this = this;
_this.loading = true;
var params = _this.query;
params.pageindex = _this.currentPage4;
params.pagesize = _this.pageSize;
var link = url.getArt("getlist_info");
$.get(link, params, (data) => {
_this.loading = false;
_this.tableData = data.list;
_this.total = data.total;
});
},
//提交表单
submitForm(formName) {
var _this = this;
var link = url.getArt("save_info");
var info = this.form;
this.$refs.form.validate((valid) => {
if (valid) {
this.submiting = true;
//提交后台添加
$.post(link, info, (res) => {
_this.submiting = false;
if (res.status) {
_this.dialogVisible = false;
_this.getList();
_this.$message({
type: "success",
message: res.msg,
});
} else {
_this.$message({
type: "error",
message: res.msg,
});
}
});
} else {
return false;
}
});
},
//编辑
editClick: function (row) {
// this.form = Object.assign({}, row);
this.dialogVisible = true;
var id = row.id;
var link = url.getArt("getmodel_info");
$.get(link, { id: id }, (res) => {
this.form = res;
});
},
//删除
delClick: function (row) {
var _this = this;
var link = url.getArt("delete_info"); //获取请求地址
var id = row.id; //获取对象id
this.$confirm("确定要删除？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
$.post(link, { id: id }, (res) => {
_this.btnLoading = false;
if (res.status) {
_this.msg = res;
_this.getList();
this.$message({
type: "success",
message: "删除成功!",
});
} else {
this.$message({
type: "error",
message: res.msg,
});
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
},
mounted() {
//获取服务器列表
this.getList();
},
};
</script>
View Code
部分效果展示：
标签：10000,attribute,51,link,res,var,false,message,id 来源： https://www.cnblogs.com/zhuiqiuzhuoyueyouminxing/p/15649195.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。