<template>
<div class="home">
<p>v-show指令</p>
<p v-show="isshow">哈哈哈哈哈哈哈</p>
<button @click="btnone">点击</button>
<p>v-for指令</p>
<p v-for="(item,index) in list" :key="index">{{item}}</p>
<p>v-if指令</p>
<p v-if="arr>8">{{arr}}</p>
<p>v-model</p>
{{vmodelal}} <br>
<input type="text" v-model="vmodelal" >
<p>v-html指令</p>
<p v-html="html"></p>
<p>v-text指令</p>
<p v-text="text"></p>
<p>v-pre指令</p>
<p v-pre>{{message}}</p>
<p>v-on指令</p>
<button v-on:click="btntwo">点击出弹框</button>
<br>
<br><hr><br>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
HelloWorld
},
data () {
return {
isshow:true,
list:{
name:"1111111",
age:"2222222",
sex:"3333333"
},
arr:90,
vmodelal:'',
html:"<i>今天星期六<i>",
text:"好好学代码努力挣大钱",
message:"要相信时间一定会被你的努力感动"
}
},
methods: {
btnone(){
this.isshow=!this.isshow
},
btntwo(){
alert(this.message)
}
}
}
</script>