Vue v-bind

来源：互联网发布：手机淘宝如何找旗舰店编辑：程序博客网时间：2024/05/19 06:15

图片处理

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <script src="../js/Vue.js" charset="utf-8"></script>    <script type="text/javascript">        window.onload = function () {            var vm = new Vue({                el: '#box',                data: {                    url:'../img/1.jpg',                    w100:'100px',                    t:"这是图片"                }            });        }    </script></head><body><div id="box">    <img v-bind:src="url" v-bind:width="w100" v-bind:title="t">    <img :src="url" :width="w100" :title="t"></div></body></html>

v-bind class

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <style>        .red{            color: red;        }        .burlywood{            background: burlywood;        }    </style>    <script src="../js/Vue.js" charset="utf-8"></script>    <script type="text/javascript">        window.onload = function () {            var vm = new Vue({                el: '#box',                data: {                   red:'red',                    burlywood:'burlywood'                }            });        }    </script></head><body><div id="box">    <p :class="[red,burlywood]">文字颜色</p></div></body></html>

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <style>        .red{            color: red;        }        .burlywood{            background: burlywood;        }    </style>    <script src="../js/Vue.js" charset="utf-8"></script>    <script type="text/javascript">        window.onload = function () {            var vm = new Vue({                el: '#box',                data: {                }            });        }    </script></head><body><div id="box">    <p :class="{red:true,burlywood:true}">文字颜色</p></div></body></html>

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <style>        .red{            color: red;        }        .burlywood{            background: burlywood;        }    </style>    <script src="../js/Vue.js" charset="utf-8"></script>    <script type="text/javascript">        window.onload = function () {            var vm = new Vue({                el: '#box',                data: {                    r:true,                    b:true                }            });        }    </script></head><body><div id="box">    <p :class="{red:r,burlywood:b}">文字颜色</p></div></body></html>

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <style>        .red{            color: red;        }        .burlywood{            background: burlywood;        }    </style>    <script src="../js/Vue.js" charset="utf-8"></script>    <script type="text/javascript">        window.onload = function () {            var vm = new Vue({                el: '#box',                data: {                    json:{                        red:true,                        b:false                    }                }            });        }    </script></head><body><div id="box">    <p :class="json">文字颜色</p></div></body></html>

v-bind style

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <script src="../js/Vue.js" charset="utf-8"></script>    <script type="text/javascript">        window.onload = function () {            var vm = new Vue({                el: '#box',                data: {                }            });        }    </script></head><body><div id="box">    <p :style="{color:'aqua'}">文字颜色</p></div></body></html>

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <script src="../js/Vue.js" charset="utf-8"></script>    <script type="text/javascript">        window.onload = function () {            var vm = new Vue({                el: '#box',                data: {                    c:{color:'aqua'}                }            });        }    </script></head><body><div id="box">    <p :style="[c]">文字颜色</p></div></body></html>

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <script src="../js/Vue.js" charset="utf-8"></script>    <script type="text/javascript">        window.onload = function () {            var vm = new Vue({                el: '#box',                data: {                    b:{color:'blue'},                    a:{backgroundColor:'aqua'}                }            });        }    </script></head><body><div id="box">    <p :style="[b,a]">文字颜色</p></div></body></html>

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <script src="../js/Vue.js" charset="utf-8"></script>    <script type="text/javascript">        window.onload = function () {            var vm = new Vue({                el: '#box',                data: {                    colors:{                        color:'blue',                        backgroundColor:'aqua'                    }                }            });        }    </script></head><body><div id="box">    <p :style="colors">文字颜色</p></div></body></html>

0 0