|
|
@@ -0,0 +1,72 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .aa{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ .bb{
|
|
|
+ color: blue;
|
|
|
+ font-size: 50px;
|
|
|
+ }
|
|
|
+ .cc{
|
|
|
+ color:green
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <button @click="change()">click</button>
|
|
|
+ <!-- v-bind 动态绑定属性 -->
|
|
|
+ <!-- <div v-bind:id="name"></div> -->
|
|
|
+ <div :id="name"></div>
|
|
|
+ <!-- <div class="aa bb">aaaaa</div> -->
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <div :class="{aa:isA,bb:isB}">aaaaaa</div> -->
|
|
|
+ <!-- <div :class="[class1,class2]">2222222222222222</div> -->
|
|
|
+
|
|
|
+ <!-- <div :class="[flag?class2:class3]">3333333</div> -->
|
|
|
+
|
|
|
+ <!-- <div style="width:200px;height:200px"></div>
|
|
|
+ <div :style="{color: color1}"></div> -->
|
|
|
+
|
|
|
+ <div :style="[s1,s2]"></div>
|
|
|
+ </div>
|
|
|
+ <script src="vue.js"></script>
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el:"#app",
|
|
|
+ data:{
|
|
|
+ name:"zs",
|
|
|
+ class1: 'aa',
|
|
|
+ class2: 'bb',
|
|
|
+ class3: 'cc',
|
|
|
+ isA: true,
|
|
|
+ isB: true,
|
|
|
+ flag:false,
|
|
|
+ color:'green',
|
|
|
+ s1:{
|
|
|
+ width:'100px',
|
|
|
+ height:'100px'
|
|
|
+ },
|
|
|
+ s2:{
|
|
|
+ background:'red'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ change(){
|
|
|
+ this.name = 'lisi'
|
|
|
+ // this.class2 = 'cc'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
zsydgithub