vue2/examples/nested-props.html

62 lines
2.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<script src="../dist/seed.js"></script>
</head>
<body>
<div id="a">
<h1>a.b.c : <span sd-text="a.b.c"></span></h1>
<h2>a.c : <span sd-text="a.c"></span></h2>
<h3>Computed property that concats the two: <span sd-text="d"></span></h3>
<button sd-on="click:one">one</button>
<button sd-on="click:two">two</button>
<button sd-on="click:three">three</button>
<p><input sd-value="msg"></p>
</div>
<div id="b">
<h1 sd-text="a.c"></h1>
</div>
<script>
seed.config({debug: true})
var data = { c: 555 }
var Demo = seed.ViewModel.extend({
init: function () {
this.msg = 'Yoyoyo'
this.a = data
},
props: {
one: function () {
this.a = {
c: 1,
b: {
c: 'one'
}
}
},
two: function () {
this.a.b = {
c: 'two'
}
this.a.c = 2
},
three: function () {
this.a.b.c = 'three'
this.a.c = 3
},
d: {get: function () {
return this.msg + (this.a.b.c || '') + (this.a.c || '')
}}
}
})
var app = new Demo({ el: '#a' }),
app2 = new seed.ViewModel({
el: '#b',
data: {
a: data
}
})
</script>
</body>
</html>