条件与循环
vue中都是用v-for来进行循环的
<template>
<table border="1">
<tr>
<td v-for="item in items">{{item.name}}</td>
</tr>
</table>
</template>
<script>
export default {
data(){
return {
items:[
{name:"小明"},
{name:"小张"},
{name:"小李"},
]
}
}
}
</script>
<style>
</style>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>list</title>
</head>
<body>
<ul id="list">
<li v-for="item in items">
{{ item.message }}
</li>
<br>
<li v-for="(item,index) in items">
{{index}}:{{ item.message }}
</li>
<br>
<template v-for="item in items">
<li>{{ item.message }}</li>
<li>--------------</li>
</template>
<br>
<li v-for="value in object">
{{ value }}
</li>
<br>
<li v-for="(value,key) in object">
{{key}}:{{ value }}
</li>
<br>
<li v-for="n in 10">{{ n }}</li>
<br>
<li v-for="n in numbers">{{ n }}</li>
</ul>
<!--of 替代 in-->
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#list",
data: {
items: [
{message: 'Foo' },
{message: 'Bar' }
],
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
},
numbers: [ 1, 2, 3, 4, 5 ]
},
computed:{
list:function(){
this.items.push({ message: 'Baz' })
},
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})
</script>
</body>
</html>
1. 可以通过el.__vfrag__.scope 获取到当前节点上绑定的Vue对象。例如：
const clipboard = new Clipboard('.anticons-list li')
clipboard.on('success', (e) =>{
const item = e.trigger.__vfrag__.scope.item
item.justCopied = true
setTimeout(() =>{
item.justCopied = false
}, 1000)
})
2. 通过vm.$compile 动态编译模板
例如：
const template = `
<animation
:show="visible"
:on-leave="_onAnimateLeave"
:transition-name="popupTransitionName">
<div>(*^__^*)</div>
</animation>
`
compiled () {
const div = document.createElement('div')
div.innerHTML = template
this.$compile(div)
document.body.appendChild(div)
},
