本例只是我自己在使用vue.js的一个测试案例，vue.js的教程网络上一大堆。或者直接进入官网http://vuejs.org.cn/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app-3">
<div v-for="test in tests">
<div @click="fu">
<p v-bind:data-id ="test.id" v-on:click="xq" v-if="test.id%2==0">id:{{test.id}} name:{{test.name}}</p>
</div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
test:{//数据对象
id:null,
name:''
},
tests:[{ //数据对象数组
id:1,
name:'zs'
},
{
id:2,
name:'ls'
},{
id:3,
name:'ww'
},{
id:4,
name:'zl'
},{
id:5,
name:'yc'
},{
id:6,
name:'ld'
},{
id:7,
name:'aw'
}]
},
methods:{//方法
xq:function(e){//子标签方法
alert(e.target.dataset.id);
e.stopPropagation();//阻止事件冒泡
},
fu:function(){//父标签方法
alert(1);
}
}
})
</script>
</html>标签解释：
@click 同等于 v-on:click 注册事件
v-bind:标签属性
v-for="data in datas" 遍历数据数组
v-if逻辑判断，支持简单的判定语句。当结果为true时显示本条标签否则不显示
{{}}数据显示域
new Vue({
el:操作对象css选择器,
data:数据,
methods:注册事件的函数
……
})
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
