老师您好,发生了下面的错误但是不知道怎么解决了,为什么说text未定义?
<template>
<div id="app">
<div>
<div v-html="price"></div>
<div :class="active">hello</div>
</div>
<div>
<h3>条件渲染</h3>
<p v-if="flag">孙悟空</p>
<p v-else>猕猴</p>
<template v-if="flag">
<p>1</p>
<p>2</p>
<p>3</p>
</template>
<div v-show="flag">hello_show</div>
</div>
<div>
<h3>列表渲染</h3>
<button @click="addItemHandle">添加数据</button>
<ul>
<li v-for="(item,index) in result":key="index">{{ item.text }}</li>
</ul>
</div>
<div>
<h3>事件渲染</h3>
<p v-if="flags">新人请多多关照</p>
<button v-on:click="clickHandle"></button>
<ul>
<li @click.stop="getMessageHandle(item.text,$event)" v-for="(item,index) in result":key="index">{{item.text}}</li>
</ul>
<a @click.prevent="clickIwenHandle" href="http://iwenwiki.com">iwen</a>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
msg:"这是一个模板语法",
price:"<h3>300</h3>",
active:"active",
count: 0,
flag:true,
result:[
{
id:1001,
text:"开放三胎"
},
{
id:1002,
text:"6.1儿童节"
},
{
id:1003,
text:"东亚文化"
}
],flags:false
}
},
methods:{
clickHandle(){
this.flags = !this.flags
},getMessageHandle(data,e){
console.log(data,e)
},
clickIwenHandle(){
console.log(111)
},
addItemHandle(){
// this.result.push({
// id:1004,
// text:"加油加油"
// })
this.result = this.result.concat([{id:1004,text:"加油加油"}]) //合并数组
}
},
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
