v-html
作用:用于输出html代码
用法:
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue的模板语法</title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="script.js"></script>
</head>
<body>
<div id="vhtml">
<div v-html="message"></div>
</div>
</body>
</html>
详解:
v-html用于绑定要插入的html内容
script代码:
window.onload=function(){
new Vue({
el:"#vhtml",
data:{
message:"<h1>我是插入的html内容</h1>"
}
});
}
详解:
message是v-html绑定的要插入的html内容
v-bind
html的属性值应该使用v-bind来绑定
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue的模板语法</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="script.js"></script>
</head>
<body>
<div id="vhtml">
<div v-html="message"></div>
</div>
<div id="vbind">
<label for="changecolor">改变颜色</label><input type="checkbox" id="changecolor" v-model="color1"/>
<p v-bind:class="{'class1':color1}">我是文字,你勾选上面的复选框,我就会改变颜色</p>
</div>
</body>
</html>
详解:
使用v-bind来绑定p的class值,这里的class名叫class1,值为color1
使用v-model来绑定input的值,将input的值传给color1
橙色的字为新增的,因为我是将这块作为同一知识点。
script代码
window.onload=function(){
new Vue({
el:"#vhtml",
data:{
message:"<h1>我是插入的html内容</h1>"
}
});
new Vue({
el:"#vbind",
data:{
color1:false
}
});
}
详解:
将这块数据作用于id为vbind的div里,将color1的值默认设为false
style.css代码
.class1{color: red;}
运行结果:
v-if
html代码:
<div id="vif">
<p v-if="seen">遭了,被你看到我了</p>
</div>
script代码:
new Vue({
el:"#vif",
data:{
seen:true
}
});
详解:
seen为true的话就能显示,为false就隐藏
v-on
html代码:
<div id="von">
<p>{{msg}}</p>
<button v-on:click="reversemsg">点击我,上面的字符串就会反转</button>
</div>
script代码:
new Vue({
el:"#von",
data:{
msg:"你看到我是反着的吗?"
},
methods:{
reversemsg:function(){
this.msg = this.msg.split("").reverse().join("");
}
}
});
运行结果:
自定义过滤器
html代码:
<div id="dfilter">
<p>{{lower | upper}}</p>
</div>
script代码:
new Vue({
el:"#dfilter",
data:{
lower:"studyvue"
},
filters:{
upper : function(value){
if(!value){
return " ";
}
value = value.toString();
return value.charAt(0).toLocaleUpperCase()+value.slice(1);
}
}
});
这里我不是很理解,自定义一个过滤器,是个方法,那他的参数就是管道符前面那个吗?