1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<style>

.box{

  background-color: #ff0;

}

.textColor{

  color: #000;

}

.textSize{

  font-size: 30px;

}

</style>

<div id="app">

  <span class="box" :class="{'textColor':isColor, 'textSize':isSize}">我是字</span>

</div>

<script>

　　new Vue({

  　　el: "#app",

　　data:{

  　　isColor:true,

  　　isSize:true

　　}

　　})

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<style>

.box{

  background-color: #ff0;

}

.textColor{

  color: #000;

}

.textSize{

  font-size: 30px;

}

</style>

<div id="app">

  <span class="box" :class="classObject">我是字</span>

</div>

<script>

new Vue({

el: "#app",

data:{

  classObject:{

  'textColor': true,

  'textSize': true

  }

  }

})

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<style>

.box{

  background-color: #ff0;

}

.textColor{

  color: #0f0;

}

.textSize{

  font-size: 30px;

}

</style>

<div id="app">

  <span class="box" :class="[classA,classB]">我是字</span>

</div>

<script>

new Vue({

  el: "#app",

  data:{

    classA: 'textColor',

    classB: 'textSize'

  }

})

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<style>

.box{

  background-color: #ff0;

}

.textColor{

  color: #0f0;

}

.textSize{

  font-size: 30px;

}

</style>

<div id="app">

  <span class="box" :class="[isA?classA:'', classB]">我是字</span>

</div>

<script>

new Vue({

  el: "#app",

  data:{

    classA: 'textColor',

    classB: 'textSize',

    isA: false

  }

})

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

<div id="app">

  <span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span>

</div>

<script>

  new Vue({

    el: "#app",

    data:{

      activeColor: 'red',

      size: '30px',

      shadow: '5px 2px 6px #000'

    }

})

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div id="app">

  <span class="box" :style="styleObject">我是字</span>

</div>

<script>

new Vue({

  el: "#app",

  data:{

    styleObject:{

    color: 'red',

    fontSize: '30px',

    textShadow: '5px 2px 6px #000'

    }

  }

})

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<div id="app">

  <span class="box" :style="[styleA,styleB]">我是字</span>

</div>

<script>

new Vue({

  el: "#app",

  data:{

    styleA:{

      fontSize: '30px',

      color: 'red'

    },

    styleB:{

      textShadow: '5px 2px 6px #000'

    }

  }

})

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<div id="app">

  <span class="box" :style="[isA?styleA:'', styleB]">我是字</span>

</div>

<script>

new Vue({

  el: "#app",

  data:{

    styleA:{

      fontSize: '30px',

      color: 'red'

    },

    styleB:{

      textShadow: '5px 2px 6px #000'

    },

    isA: false

  }

})

</script>

1

2

3

4

5

6

7

8

9

10

11

<div id="app">

  <img :src="url" />

</div>

<script>

  new Vue({

    el: "#app",

    data:{

      url: "../img/pg.png"

    }

})

</script>

1

2

3

4

5

6

7

8

9

10

11

<div id="app">

  <div :title="message">我是字</div>

</div> 

<script type="text/javascript">

  new Vue({

  el: "#app",

  data:{

    message:"我是吱吱"

  }

  })

</script>