案例"/>
查询所有案例
1.实现过程
2.案例代码
brand.html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>常用指令</title><!-- 引包 --><script src="vue2.0.js"></script>
</head>
<body><div id="root"><!-- 添加功能跳转添加页面 --><a href="add.html"><input type="button" value="添加"></a><br><hr><table id="brand" border="1" cellspacing="0" width="100%"><tr align="center"><!-- 一行 --><th>序号</th><!-- 列头 --><th>名字</th><th>操作</th></tr><!-- v-for遍历数据项 --><tr v-for="(brand,index) in brands"align="center"><!-- 一行 --><td>{{index+1}}</td><!-- 数据单元格 --><td>{{brand}}</td><td><a href="#">修改</a><a href="#">删除</a></td></tr></table></div><script>// 创建Vue核心对象new Vue({el:"#root",//指定容器iddata(){return{brands:["日用品","学习用品","生活用品"]//为模型数据赋初值}},// mounted:function(){//完整写法// }mounted(){//简化写法,页面加载完成后发送异步请求，查询数据alert("我是发送异步请求的代码....");}});</script>
</body>
</html>
add.html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>add</title><script src="vue2.0.js"></script>
</head>
<body><div id="root"><h3>添加</h3><form option="" method="post">类型：<input id="brandName" v-model="brand" name="brandName"><input type="button" id="btn" @click="submit" value="提交"></form></div><script>new Vue({el:"#root",data(){return{brand:[]}},methods: {submit(){//发送请求alert("提交成功!");location.href="brand.html"}},})</script>
</body>
</html>
更多推荐
查询所有案例
发布评论