v-html
Role: used to output html code
usage:
html code:
<!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>
Detailed explanation:
v-html is used to bind the html content to be inserted
script code:
window.onload=function(){
new Vue({
el:"#vhtml",
data:{
message:"<h1>I am the inserted html content</h1>"
}
});
}
Details:
message is the html content to be inserted bound by v-html
v-bind
The attribute value of html should be bound using v-bind
html code:
<!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"/>
</body> </div> <p v-bind:class="{'class1':color1}">I am text, you check the above I'll change the color of the checkboxes</p>
</html>
Details:
Use v-bind to bind the class value of p, where the class name is class1 and the value is color1
Use v-model to bind the input value and pass the input value to color1
The words in orange are newly added, because I use this piece as the same knowledge point.
script code
window.onload=function(){
new Vue({
el:"#vhtml",
data:{
message:"<h1>I am the inserted html content</h1>"
}
});
new Vue({
el:" #vbind",
data:{
color1:false
}
});
}
Details:
Apply this data to the div with the id vbind, and set the value of color1 to false by default
style.css code
.class1{color: red;}
operation result:
v-if
html code:
<div id="vif">
<p v-if="seen">I was caught, you saw me</p>
</div>
script code:
new Vue({
el:"#vif",
data:{
seen:true
}
});
Detailed explanation:
If seen is true, it can be displayed, and if it is false, it can be hidden.
v-on
html code:
<div id="von">
<p>{{msg}}</p>
<button v-on:click="reversemsg">Click me and the string above will be reversed</button>
</div >
script code:
new Vue({
el:"#von",
data:{
msg:"Do you see me reversed?"
},
methods:{
reversemsg:function(){
this.msg = this.msg.split(" ").reverse().join("");
}
}
});
operation result:
custom filter
html代码：
<div id="dfilter">
<p>{{lower | upper}}</p>
</div>
script code:
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);
}
}
});
I don't understand it very well here. Customizing a filter is a method. Is its parameter the one in front of the pipe character?