4 vue之属性指令
1 属性指令
#只要是标签的属性,都可以使用属性指令动态绑定
# v-bind:属性名=属性值
# :属性名=属性值
2 案例
v-bind:class='js变量' 可以缩写成::class='js变量'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性指令</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .red { color: red; } .green { color: green; } </style> </head> <body> <div id="app"> <div v-bind:class="my_red">v-bind</div> <div :class="my_green">推荐使用 :</div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { my_red: 'red', my_green: 'green' }, methods: {} }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div class="app"> <h1>只要是标签的属性,都可以使用属性指令动态绑定</h1> <span id="id_span" v-bind:name="name">我是span</span> <hr> <span id="id_span2" :name="name">我是span222</span> <hr> <a :href="url">点我好看</a> //点一下会跳转 <hr> <img :src="src" alt=""> </div> </body> <script> var vm=new Vue({ el:'.app', data:{ name:'lqz', url:'http://www.baidu.com', src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2Ff8f343e8f16c55ee489da60bfca7cd0ceb01bfd0a98a-ixSNbV_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647048281&t=acb541b86473f0b910fae0ee787228f2' } }) </script> </html>