1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 样式绑定title>
6 <style>
7 .basic{
8 width: 400px;
9 height: 100px;
10 border: 1px solid black;
11 }
12 .happy{
13 border: 4px solid red;
14 background-color: rgba(255, 255, 0, 0.644);
15 background: linear-gradient(30deg, yellow, pink, orange, yellow);
16 }
17 .sad{
18 border: 4px dashed rgb(2, 197, 2);
19 background-color: gray;
20 }
21 .normal{
22 background-color: skyblue;
23 }
24 .div1{
25 background-color: yellowgreen;
26 }
27 .div2{
28 font-size: 30px;
29 text-shadow: 2px 2px 10px red;
30 }
31 .div3{
32 border-radius: 20px;
33 }
34 style>
35 <script type="text/javascript" src="../js/vue.js">script>
36 head>
37 <body>
38
50 <div id="root">
51
52 <div class="basic" :class="mood" @click="changeMood">{{name}}div> <br/> <br/>
53
54
55 <div class="basic" :class="classArr">{{name}}div> <br/> <br/>
56
57
58 <div class="basic" :class="classObj">{{name}}div> <br/> <br/>
59
60
61 <div class="basic" :style="styleObj">{{name}}div> <br/> <br/>
62
63
64 <div class="basic" :style="styleArr">{{name}}div> <br/> <br/>
65 div>
66 body>
67
68 <script type="text/javascript" >
69 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
70 let vm = new Vue({
71 el: '#root',
72 data:{
73 name: 'BaiYeShu',
74 mood: 'normal',
75 classArr: ['div1', 'div2', 'div3'],
76 classObj:{
77 div1: true,
78 div2: true,
79 div3: true
80 },
81 styleObj:{
82 color: "red",
83 fontSize: "40px",
84 backgroundColor: 'orange'
85 },
86 styleArr:[
87 {
88 color: "red",
89 fontSize: "40px",
90 },
91 {
92 backgroundColor: 'orange'
93 }
94 ]
95 },
96 methods:{
97 changeMood(e){
98 const arr = ['happy', 'sad', 'normal'];
99 const index = Math.floor(Math.random()*3);
100 this.mood = arr[index];
101 }
102 }
103 });
104 script>
105 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 条件渲染title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 head>
8 <body>
9
25 <div id="root">
26 <h2>当前n的值是:{{n}}h2>
27 <button @click="n++">点我n+1button>
28
29
31
32
33
35
36
37 <div v-if="n === 1">Angulardiv>
38 <div v-else-if="n === 2">Reactdiv>
39 <div v-else-if="n === 3">Vuediv>
40 <div v-else>哈哈div>
41
42
43 <template v-if="n === 1">
44 <h2>helloh2>
45 <h2>{{name}}h2>
46 <h2>BeiJingh2>
47 template>
48 div>
49 body>
50
51 <script type="text/javascript" >
52 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
53 let vm = new Vue({
54 el: '#root',
55 data:{
56 name: 'BaiYeShu',
57 n: 0
58 },
59 });
60 script>
61 html>