Vue起步之動態CSS
阿新 • • 發佈:2018-11-11
1.動態Css
html
app04.js
css
2.V-if
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link rel="stylesheet" href="demo04.css"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <!--根容器--> <div id="vue-app"> <h1>V-if </h1> <button v-on:click="error = !error">toggle Error</button> <button v-on:click="success=!success">toggle success</button> <p v-if="error"> 網路連線錯誤404</p> <p v-else-if="success"> 網路連線成功200</p> <p v-show="error"> 網路連線錯誤404</p> <p v-show="success"> 網路連線成功200</p> </div> <script src="app05.js"></script> </body> </html>
app.js
/例項化物件
new Vue({
el:"#vue-app",
data:{
error:false,
success:false
},
methods:{
},
computed:{
}
});
3.V-for
實現遍歷陣列和物件列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link rel="stylesheet" href="demo04.css"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <!--根容器--> <div id="vue-app"> <h1>V-for 迴圈 </h1> <!--陣列遍歷--> <ul> <li v-for="character in characters"> {{character}} </li> </ul> <ul> <li v-for="(user,index) in users"> {{index+1}}- {{user.name}}-{{user.age}} </li> </ul> <template v-for="(user,index) in users"> <h3>{{index+1}}- {{user.name}}</h3> <p>{{user.age}}</p> </template> <template v-for="(user,index) in users"> <div v-for="(val,key) in user"> <h3>{{val}}- {{key}}</h3> </div> </template> </div> <script src="app06.js"></script> </body> </html>
//例項化物件 new Vue({ el:"#vue-app", data:{ characters:["mario",'jerry','youshi'], users:[ {name:'lisi',age:34}, {name:'zhi',age:24}, {name:'li',age:31}, {name:'si',age:33}, {name:'lsi',age:24}, ] }, methods:{ }, computed:{ } });
Vue-一個小demo:https://blog.csdn.net/qq_35723619/article/details/83817073