vue 模板语法
Posted yanxiatingyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 模板语法相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./vue.js" type="text/javascript" charset="UTF-8"></script> </head> <script language="JavaScript"> // 锚点的使用，定位到最底部 window.location="#bottom_location"; </script> <body> <div id="app"> <span v-once> {{msg}} </span> <br/> <span>{{ msg_2}}</span> <br/> <span>{{ rawHtml}}</span> <br/> <span v-html="rawHtml"></span> <br/> <span v-html="rawHtmlBind">{{ rawHtmlBind }}</span> <br/> <div v-bind:class="color">test...</div> <br/> <div v-bind:class="color_2">test..t.</div> <br/> 表达式 <br/> <p>{{ number + 1}}</p> <p> 三元表达式，比较运算：{{ ok ? ‘Yes‘:‘NO‘}}</p> <p> {{ messsage.split(‘‘).reverse().join(‘‘) }} </p> </div> <script type="text/javascript"> var vm =new Vue({ el:‘#app‘, data:{ msg:‘文本插值!‘, msg_2:‘文本插值‘, rawHtml:"<span style=‘color:red‘><br/>双大括号会将数据解释为普通文本，<br/>而非HTML，<br/>你需要使用v-html指令解决这个问题</span>", rawHtmlBind:‘<br/>Mustache语法不能作用在HTML特性上，<br/>遇到这种情况应该使用V-bind指令<br/>‘, color:‘red‘, color_2:‘changeblue‘, number:1, ok:‘Yes‘, messsage:‘字符串处理，分割，反转，拼接‘ } }); vm.msg=‘v-once指令，限制数据更改。‘ vm.msg_2=‘没有加上v-once指令，数据修改成功！‘ </script> <style type="text/css"> .red{ color:red; } .changeblue{ color:blue; font-size:100px; } </style> <a name="bottom_location"></a> </body> </html>
以上是关于vue 模板语法的主要内容，如果未能解决你的问题，请参考以下文章
vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容