您的位置：首页 > 产品设计 > UI/UE

vue指令练习demo

2017-11-01 00:28 369 查看

vue练习demo

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../vue1026.js"></script>
<!--1.引入vuejs文件-->
<style>
#app{
width: 800px;/*先绘制div在调整位置在填充内容*/
margin: 20px auto;/*使用margin:0 auto;居中盒子盒子必须有宽度*/
}
#tb{
width: 800px;
border-collapse: collapse;
margin-top: 20px;
}
#tb th{
background-color: #0094ff;
border: 1px solid black;
color: white;
font-size: 16px;
padding: 5px;
text-align: center;
}
#tb td{
text-align: center;
font-size: 20px;
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<!--3.绘制静态页面-->
<div id="app">
<input type="text" v-model="id"/><!--v-model实现双向数据绑定，所绑定的数据在data中定义-->
<input type="text" v-model="pname"/>
<button @click="addData">添加数据</button>
<br/>
<table id="tb">
<tr>
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-show="list.length==0"><!--当list没有数据时显示此内容-->
<!--v-show，如果=后的判断条件为真，则显示，相当于if=后的条件为真，则设置此dom元素display:block;-->
<td colspan="4">当前列表没有任何数据</td>
</tr>
<tr v-for="item in list"><!--v-for实现数据的遍历-->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="javascript:void (0)" @click="">删除</a>
</td>
</tr>
</table>
</div>
</body>

<script>
//    2.创建组件
var vm=new Vue({
el:"#app",//组件的作用范围
data:{//组件的所含的数据，变量，常量
color1:"red",
list:[{
id:1,
name:"奔驰",
ctime:new Date()
},{
id:2,
name:"宝马",
ctime:new Date()
},{
id:3,
name:"奇瑞",
ctime:new Date()
}],
id:0,
pname:''

},
methods:{//组件的方法
//每实现一个功能将其注册为一个方法和对应的dom元素绑定
addData:function(){/*实现数据添加功能*/
//从input中获取输入的数据，将其添加到data.list中，vue会自动渲染dom元素
//怎么获取input中的数据？用v-model实现双向绑定，输入的数据即为组件中的数据
var p={
id:this.id,
name:this.pname,
ctime:new Date()
}
this.list.push(p);
//清空页面上的文本框中的数据
//vue将对dom的操作转化为对数据的操作
this.id='';
this.pname='';
}
}
})
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue 增删改查指令练习

相关文章推荐

新的分享

章节导航