vue---模板语法
Posted by-young
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue---模板语法相关的知识，希望对你有一定的参考价值。
一次性插入，不再修改：v-once
<body>
<div id="app">
<h1>{{message}}</h1>
<h1 v-once>v-once：{{message}}</h1>
<button type="button" @click="changetext">改变文字</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:"hello Vue"
},
methods:{
changetext:function(){
this.$data.message="hello world"
}
}
})
</script>
</body>
插入html标签：v-html
<body>
<div id="app">
<!-- 不会读取标签，全部以文本形式展示 -->
<h1>{{htmlTxt}}</h1>
<!-- 以html标签形式被读取 -->
<h1 v-html="htmlTxt"></h1>
</div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
htmlTxt:‘<span>hello</span>‘
}
})
</script>
</body>
绑定动态属性：v-bind（可直接省略，用“：”代替）
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#login{
background-color: aqua;
}
#register{
background-color: palevioletred;
}
</style>
</head>
<body>
<div id="app">
<h1 v-bind:id="idname">hallo</h1>
<button @click="changeId">修改id</button>
</div>
<script src="js/hello.js"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
idname:"login"
},
methods:{
changeId:function(){
this.idname="register"
}
},
})
</script>
</body>
</html>
以上是关于vue---模板语法的主要内容，如果未能解决你的问题，请参考以下文章
vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容