<body>
<div id="app">
<p>{{sayHello()}}</p>
<ul>
<li>姓名: {{name}}</li>
<!-- 姓名: peng jia xiong -->
<li>学校: {{school}}</li>
<!-- 学校: jiang ruan -->
</ul>
</div>
<script src="./vue.js"></script>
<script>
let user = {
name:"peng jia xiong ",
school:"jiang ruan",
};
let vm = new Vue ({
el:'#app',
data: user,
methods:{
sayHello(){
return`你好,欢迎来自${this.school} 的 ${this.name} !`
// 你好,欢迎来自jiang ruan 的 peng jia xiong !
}
}
})
</script>
</body>
计数器
<body>
<div class="ha">
<script src="./vue.js"></script>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
</body>
图片切换
<body>
<div id="app">
<div id="" class="son">
<button type="button" class="btnleft" @click="pref" v-show="index!=0"> < </button>
<button type="button" class="btnright" @click="next" v-show="index<imgArr.length-1"> > </button>
<img :src="imgArr[index]" >
</div>
</div>
<script src="./vue.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
var app=new Vue({
el:"#app",
data:{
imgArr:[
"images/08.jpg",
"images/09.jpg",
"images/10.jpg"],
index:0,
},
methods:{
pref:function(){//上一张
this.index--;
},
next:function(){//下一张
this.index++;
}
}
})
}
</script>
</body>