<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="example-2">
<!-- greet 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
{{message}}
{{number*3.14}}
{{true? "ok" :"no"}}
<button v-on:click="fun1('改变message的值')">改变message的值</button>
</div>
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js',
message: "Hello Vue laowang",
number: 100
},
// 在 methods 对象中定义方法
methods: {
greet: function (event) {
// this 在方法里指向当前 Vue 实例
alert('Hellso ' + this.name + '!')
// event 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
},
fun1: function (msg) {
alert("132456");
//this.message就是上面data的变量的值
this.message = msg
},
}
});
var example_3 = new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'
</script>
</body>
</html>
版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
常见资源合集和破解 fmvvvteih...