Vue v-bind

图片处理


<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


<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>

<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>

<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>

<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


<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>

<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>

<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>

<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>

你可能感兴趣的:(Vue)