You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.7 KiB
104 lines
2.7 KiB
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<title>{{ title }}</title>
|
|
<script src="js/vue.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!--gv-start-->
|
|
<div>
|
|
<div>{{title1}}</div>
|
|
<div>{{title2}}</div>
|
|
<assssss>{{title2}}</assssss>
|
|
<div>{{title3}}</div>
|
|
<a href="#" @click="click">{{title3}}</a>
|
|
|
|
<div id="app-4">
|
|
<ol>
|
|
<li v-for="todo in todos">
|
|
<a href="#" @click="click(todo.text)"> {{ todo.text }}</a>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
|
|
<input v-model="message" placeholder="edit me">
|
|
|
|
<textarea v-model="message" placeholder="add multiple lines"></textarea>
|
|
<p>Original message: "{{ message }}"</p>
|
|
<p>Computed reversed message: "{{ reversedMessage }}"</p>
|
|
|
|
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
|
|
<label for="jack">Jack</label>
|
|
<input type="checkbox" id="john" value="John" v-model="checkedNames">
|
|
<label for="john">John</label>
|
|
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
|
|
<label for="mike">Mike</label>
|
|
<br>
|
|
<span>Checked names: {{ checkedNames }}</span>
|
|
<div id="example-4">
|
|
<input type="radio" id="one" value="One" v-model="picked">
|
|
<label for="one">One</label>
|
|
<br>
|
|
<input type="radio" id="two" value="Two" v-model="picked">
|
|
<label for="two">Two</label>
|
|
<br>
|
|
<span>Picked: {{ picked }}</span>
|
|
</div>
|
|
|
|
<select v-model="selected">
|
|
<option v-for="option in options" v-bind:value="option.value">
|
|
{{ option.text }}
|
|
</option>
|
|
</select>
|
|
<span>Selected: {{ selected }}</span>
|
|
</div>
|
|
<!--gv-end-->
|
|
</body>
|
|
|
|
|
|
<script src="js/govue.js"></script>
|
|
<script gv-src>
|
|
var app = new Vue({
|
|
data: {
|
|
message: 'Hello',
|
|
title1: "123",
|
|
title2: "456",
|
|
title3: "789",
|
|
|
|
todos: [
|
|
{text: '学习 JavaScript'},
|
|
{text: '学习 Vue'},
|
|
{text: '整个牛项目'},
|
|
{text: '{{a}}'}
|
|
],
|
|
checkedNames: [],
|
|
picked: '',
|
|
|
|
selected: 'A',
|
|
options: [
|
|
{text: 'One', value: 'A'},
|
|
{text: 'Two', value: 'B'},
|
|
{text: 'Three', value: 'C'}
|
|
]
|
|
},
|
|
computed: {
|
|
// 计算属性的 getter
|
|
reversedMessage: function () {
|
|
// `this` 指向 vm 实例
|
|
return this.message.split('').reverse().join('')
|
|
}
|
|
},
|
|
methods: {
|
|
click: function (a) {
|
|
alert("点击触发:" + a);
|
|
},
|
|
},
|
|
});
|
|
GoVueMount(app, {
|
|
title: "123"
|
|
}, "body > div")
|
|
</script>
|
|
</html>
|