Vue.js 模板语法
Posted why_not_try
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 模板语法相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue学习</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!--<link rel="stylesheet" type="text/css" href="main.css"/>--> 8 <script src="vue.js"></script> 9 </head> 10 <body> 11 <style> 12 .class1{ 13 background-color: #444; 14 color: orange; 15 } 16 </style> 17 <div id="app"> 18 <!--{{}}用于文本插值--> 19 <p>{{msg}}</p> 20 <p>{{html1}}</p> 21 <!--v-html指令用于输出html代码--> 22 <p v-html="html1"></p> 23 <!--html属性中的值使用v-bind--> 24 <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1"><br><br> 25 <div v-bind:class="{\'class1\':class1}">directive v-bind:class</div> 26 27 <!--Vue支持完全的javascript表达式--> 28 {{5+5}} 29 {{ok? \'true\':\'false\'}} 30 {{msg.split(\' \').reverse().join(\',\')}} 31 32 <!--带有v-前缀的是Vue指令，表达式的值改变时，映射到DOM上--> 33 <div class="div1" v-if="seen">you can see that</div> 34 <!--参数--> 35 <!--注意下面两种情况--> 36 <!--v-bind将该元素的href值与表达式href值绑定--> 37 <div><a v-bind:href="href">click this</a></div> 38 <div><a href="href">click this</a></div> 39 40 <!--修饰符：如.指明的特殊后缀，用于指定应该以特殊方式绑定--> 41 42 <!--.prevent告诉v-on对于事件调用event.preventDefault()--> 43 <form v-on:submit.prevent="onSubmit"></form> 44 45 <!--v-model可以实现数据双向绑定--> 46 <!--下面的例子中数据同时变化--> 47 {{msg1}} 48 <input type="text" v-model="msg1"> 49 50 <!--v-bind缩写为:,v-on缩写为@--> 51 <button @click="reverseMsg1">点击反转msg1</button> 52 53 <!--过滤器--> 54 <div>{{msg2|capitalize}}</div> 55 </div> 56 <script> 57 var vm =new Vue({ 58 el: \'#app\', 59 data: { 60 msg: \'hello msg\', 61 ok: 1, 62 html1: \'<span color="red">this is red</span>\', 63 class1: false, 64 seen: true, 65 href: \'https://g.cn\', 66 msg1: \'hello msg1\', 67 msg2:\'msg2\' 68 69 }, 70 methods:{ 71 reverseMsg1:function(){ 72 this.msg1= this.msg1.split(\'\').reverse().join(\'\'); 73 } 74 }, 75 filters:{ 76 capitalize:function(msg2){ 77 if(!msg2){ 78 return \'\' 79 } 80 msg2=msg2.toString() 81 return msg2.slice(0,1).toUpperCase()+msg2.slice(1) 82 } 83 } 84 }) 85 </script> 86 </body> 87 </html>
运行结果：
参考：https://cn.vuejs.org/v2/guide/syntax.html，http://www.runoob.com/vue2/vue-template-syntax.html
以上是关于Vue.js 模板语法的主要内容，如果未能解决你的问题，请参考以下文章