1.属性绑定指令 v-bind
<style> article{padding:20px;border:4px solid #ccc} .redColor{color:red} .blueColor{color:blue} .narrow{width:50%} .head{text-decoration:underline} </style>
<div id="app2"> <article v-bind:class="[{redColor:(colorClass==='red')}, {blueColor:(colorClass==='blue')}]"> <h1 :class="{head:underline}">我是文章标题</h1> <section :class="{narrow:isNarrow}"> 我是文章内容,请自行想象这里是一篇内容丰富趣味横生的文章。哈哈。 </section> <footer :style="{fontSize:size,textAlign:textPosition}">作者:上古神兽</footer> </article> <aside> <h3 v-bind:style="tipStyle">请设置您想要的样式</h3> <p> <label>设置标题带下划线<input type="checkbox" v-model="underline"></label><br><br> <label>设置字体为红色<input type="radio" value="red" v-model="colorClass"></label> <label>设置字体为蓝色<input type="radio" value="blue" v-model="colorClass"></label> {{ colorClass }} <br><br> <label>设置内容宽度为50%<input type="checkbox" v-model="isNarrow"></label> {{ isNarrow }} </p> </aside> </div> <script> var vm=new Vue({ el:"#app2", data:{ colorClass:"", isNarrow:false, underline:false, size:"12px", textPosition:"right", tipStyle:{ fontWeight:"normal", color:"pink" } } }); </script>
2.几个有用的指令 v-pre v-cloak v-once
<style> [v-cloak]{display:none} </style> <div id="app3"> <p v-pre>插值的最简单语法就是 {{ message }}</p> <p v-cloak>这里的内容从服务器获取,可能有网络延迟,没渲染后前不可见 {{ devList }}</p> <p v-once> 现在的密码是:{{ password }}<br> <label>设置新密码:<input type="password" v-model="password"></label> </p> </div> <script> var vm3=new Vue({ el:"#app3", data:{ message:"hello Vue!", password:"123456" }, computed:{ devList:function(){ for(var i=0;i<1000000000;i++){ } return ["Lily","Joe","Jack","Lily","Joe","Jack"].join(); } } }); </script>