vue中的v-bind、v-on作用
直接上代码:v-bind:v-bind 是vue中,提供的用于绑定属性的指令<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>学习 v-cloak v-test v-html</title><!--/...
·
直接上代码:
v-bind:
v-bind 是vue中,提供的用于绑定属性的指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习 v-cloak v-test v-html</title>
<!--//导入js包-->
<script src="js/vue.js"></script>
</head>
<body>
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<!--v-bind 是vue中,提供的用于绑定属性的指令-->
<input type="button" value="按钮" v-bind:title="mytitle+'124'">
<!--v-bind的简便方法,可以被简写为 :-->
<input type="button" value="按钮" :title="mytitle">
</div>
</body>
<script>
new Vue(
{
el: '#app',
data: {
mytitle:'这是一个自己定义的title'
}
}
)
</script>
</html>
v-on
v-on指令事件绑定机制 show就是methods中的方法名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习 v-cloak v-test v-html</title>
<!--//导入js包-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-on指令事件绑定机制 show就是methods中的方法名称-->
<!---v-on的简便方法,可以被简写为 @-->
<input type="button" value="按钮" v-on:mouseover="show">
<input type="button" value="按钮" v-on:click="show">
</div>
</body>
<script>
new Vue(
{
el: '#app',
data: {
mytitle:'这是一个自己定义的title'
},
methods:{//这个mehtods属性就是定义了当前vue实例所有可以用的方法
show:function() {
alert("methods中的方法")
}
}
}
)
</script>
</html>
更多推荐
已为社区贡献4条内容
所有评论(0)