vue属性的绑定:
我们绑定属性数据的时候有些人会这样 <img src='{{url}}'> 虽然这让也可一出来,但你打开控制台时会发现有一条404的错误。
所以我们在使用vue的时候要按vue的要求来写 这样<img v-bind:src='url'> 都不需要 {{}} 来写入。
当然也会有简写 <img :src='url'> 这样在控制台就不会有了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> <img v-bind:src='url'>
<img :src='url'> //简写 </div> <script src="vue.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ url:'01.png' }, methods:{ } }) </script> </body> </html>
ps:当然所有属性都可以这样写。
属性中有两个特殊的 class 和 style
第一种class添加方法:
<img :src='url' :class='[border]'> 这个数组里面的border代表了 new Vue()中写的数据,这个数据字符串可以代表
class名,数据和style中的class名相对应,这样不就写入了吗? 多个class名只要
在[class1,class2,.......] 这样就可以了。
第二种class添加方法:
<img :src='url' :class={border:true}> 这个写法json中的第一个就代表了style中的class名但是只有他后面的值是‘真’
的时候执行。也就是 等于 true。
第一种style添加方法:
<div :style='[a,b]'> 当然在数据中定义就不相同了。 a:{background:'red'} c:{border:'1px solid #000'}
这样就可以
第二种方法:
<div :style='{background:"red",border:"1px solid #000"}'> json这样就可以当然你也可以数据中写个json在放入