脚本宝典收集整理的这篇文章主要介绍了Vue的模板语法学习,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<div id="app">
<span>{{ msg }}</span><br/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"wo zai xue xi vue!"
}
});
</script>
结果就是:wo zai xue xi vue!
<div id="app">
<span>{{ msg }}</span>
<h4 v-once>{{ msg }}</h4>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"wo zai xue xi vue!"
}
});
</script>
打印结果看下图
<div id="app">
<div v-html="message"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"我是纯HTML"
}
});
</script>
打印结果:我是纯HTML
<div id="app">
<div v-bind:title="msg2">nihao</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg1:"<li>nihao</li>",
msg2:"你好啊"
}
});
</script>
<div id="app">
<a v-bind:href="url" v-on:click.prevent="a">百度</a>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"xue xi vue!",
url:"http://www.baidu.com"
},
methods:{
a:function(){
console.log("阻止跳转!")
}
}
});
</script>
结果看下图
<div id="app">
{{msg|guolvqi}}
{{msg|guolvqi}}
{{msg|guolvqi}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"xue xi vue!"
},
//定义过滤器
filters: {
guolvqi:function(value){
return value.split("").reverse().join("")
}
}
});
</script>
打印结果:!euv ix eux !euv ix eux !euv ix eux
<div id="app">
{{msg|guolvqi|daxie}}
{{msg|guolvqi|daxie}}
{{msg|guolvqi|daxie}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"xue xi vue!"
},
//定义过滤器
filters: {
guolvqi:function(value){
return value.split("").reverse().join("")
},
daxie:function(value){
return value.toUpperCase();
}
}
});
</script>
打印结果:!EUV IX EUX !EUV IX EUX !EUV IX EUX
<div id="app">
<div :title="msg">缩写</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"xue xi vue!"
}
});
</script>
结果看下图
<div id="app">
<div @click="shijian">缩写</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"xue xi vue!"
},
methods:{
shijian:function(){
console.log(this.msg)
}
}
});
</script>
结果看下图
以上是脚本宝典为你收集整理的Vue的模板语法学习全部内容,希望文章能够帮你解决Vue的模板语法学习所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。