<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hhhh</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app_1"> <h3>example 1</h3> <p>{{message}}</p> </div> <div id="app_2"> <h3>example 2</h3> <span v-bind:title="message">鼠标悬停查看动态绑定信息</span> </div> <div id="app_3"> <h3>example 3</h3> <p v-if="message">条件语句(控制台输入app_3.message=false,则message内容消失)</p> </div> <div id="app_4"> <h3>example 4</h3> <p>在控制台输入app_4.select.push({ text: 'coffee' }),添加选项</p> <ol> <li v-for="num in select">{{num.text}}</li> </ol> </div> <div id="app_5"> <h3>example 5</h3> <p>{{message}}</p> <button v-on:click="reverseMessage">逆转</button> </div> <div id="app_6"> <h3>example 6</h3> <p>{{message}}</p> <input v-model="message"> </div> <div id="app_7"> <h3>example 7</h3> </div> <script type="text/javascript"> var app_1 = new Vue({ el:'#app_1', data:{ message:'hello vue.js' } }) var app_2 = new Vue({ el: '#app_2', data:{ message:'页面加载时间:'+ new Date().toLocaleString() } }) var app_3 = new Vue({ el:'#app_3', data:{ message:true } }) var app_4= new Vue({ el:'#app_4', data:{ select:[ {text:'apple'}, {text:'banana'}, {text:'orange'} ] } }) var app_5 = new Vue({ el:'#app_5', data:{ message:'hello' }, methods:{ reverseMessage:function(){ this.message=this.message.split('').reverse('').join('') } } }) var app_6 = new Vue({ el:'#app_6', data:{ message:'hello vue.js' } }) </script> </body> </html>
效果:
after:
---------------------------------------------------------------------------------------------------------------------------
PS: 以上案例均是来自vue.js官网,
小白日常小练习==