1.v-html
用于输出真正html，而不是纯文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="v-html" v-html="message">
{{message}}
</div>
<script>
var vHtml=new Vue({
el:‘#v-html‘,
data:{
message:‘<p>v-html指令添加的p标签</p>‘
}
})
</script>
</body>
</html>
2.v-bind
用于html属性的数据绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<input id="v-bind" type="text" v-bind:disabled="message">
<script>
var vBind=new Vue({
el:‘#v-bind‘,
data:{
message:‘false‘
}
})
</script>
</body>
</html>
3.v-on
用于监听DOM事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="v-on" v-on:click="changeStatus">
{{message}}
</div>
<script>
var vOn=new Vue({
el:‘#v-on‘,
data:{
message:‘我喜欢vue.js‘
},
methods:{
changeStatus:function(){
if(this.message==‘我喜欢vue.js‘)
{
this.message=‘我不喜欢vue.js‘
}
else
{
this.message="我喜欢vue.js"
}
}
}
})
</script>
</body>
</html>
注意：只有v-on和v-bind可以接参数，在指令后面用冒号指明属性和值绑定。
4.v-model
用于表单输入与应用状态的双向数据绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="v-model">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
<script>
var vModel=new Vue({
el:‘#v-model‘,
data:{
message:‘‘
}
})
</script>
</body>
</html>
5.v-if
v-if接收bool类型。true的话则生成html，false则不生成。或者直接将元素remove掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="v-if">
<p v-if="seen">我在闪烁</p>
</div>
<script>
var vIf=new Vue({
el:‘#v-if‘,
data:{
seen:true
},
methods:{
change:function(){
if(this.seen)
{
this.seen=false;
}
else
{
this.seen=true;
}
}
}
})
setInterval(vIf.change,1000)
</script>
</body>
</html>
6.
时间： 2024-11-07 00:09:45