老师,表单的输入与绑定中p标签里面的username一直没反应，显示不出来
<template>
<div id="app">
<div>
<h3>模块语法</h3>
<p>{{ msg }}</p>
<div v-html="price"></div> <!--原生html指令-->
<div v-bind:class="active">hello,python</div> <!--绑定对象属性进行操作-->
<p>{{ conte *2}}</p>
</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">helle,show</div>
</div>
<div>
<h3>渲染列表</h3>
<button @click="addItemHanle">添加数据</button>
<ul>
<!--item代表一个变量，index代表的是索引，:key="index"是唯一标识id-->
<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>
<!--item代表一个变量，index代表的是索引，:key="index"是唯一标识id-->
<!--不传递参数的情况下对生成一个$event对象属性-->
<li v-on:click.stop="getMessageHandle(item.text,$event)" v-for="(item,index) in result" :key="index">{{item.text}}</li>
</ul>
<!--prevent阻止事件进行调转-->
<a v-on:click.prevent="clickIwenHanle" href="http://iwenwiki.com">iwen</a>
</div>
<div>
<h3>表单的输入与绑定</h3>
<p>{{username}}</p>
<input type="text" v-model="username">
<button @click="clickInputHale">获取</button>
</div>
</div>
</template>
<script>
import HelloWorld from './HelloWorld.vue'
export default {
name: 'App',
data(){
return{
msg:"这是一套模板语法",
price:"<h1>百战程序员</h1>",
active:"active",
conte:0,
flag:false,
result:[
{
id:1001,
text:"东京的水"
},
{
id:1002,
text:"印度的疫情"
},
{
id:1003,
text:"中国的高铁"
},
],
flags:false
}
},
methods:{ //承载事件函数
clickHandle(){
this.flags=!this.flags //进行取反的操作绑定事件，this绑定到属性flags=*
},
getMessageHandle(date,e){ //date代表是的参数的item.text文本信息，$event(固定写法)代表是e对象
console.log(date,e);
},
clickIwenHanle(){
console.log("吕小布")
},
addItemHanle(){
// this.result.push({
// id:1003,
// text:"加油加油"
// })
this.result=this.result.concat([{id:1004,text:"加油"}]) //集成一个新的数组返回
},
clickInputHale(){
console.log(this.username);
}
},
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
京公网安备 11011402011233号