Vue学习笔记整理(一)--基本指令--有代码实例
程序员文章站
2022-03-07 17:19:54
...
1.Vue基本指令
v-model:实现数据的双向绑定v-once: 记录第一次的值,不随改变而改变
v-if: 条件渲染指令 v-if="expression"expression返回的是bool值 dom树改变
v-else: 与v-if配套使用 必须紧跟在v-if后面
v-show: 条件渲染指令 v-show="expression"expression返回的是bool值 css样式的切换 display:none
v-else-if:条件渲染指令 多条件指令
v-for:基于数据渲染一个列表,类似js中的遍历,其数据类型可以是Array,object,number,string,优先级高于其他指令
v-text:注入的数据将静态数据覆盖
v-html:注入标签
v-bind:将属性动态的绑定到标签上面去 可以绑定属性 绑定类 简写 :
v-on: 用于触发事件 简写 @
下面举个栗子(有表单数据验证):
html代码:
<fieldset>
<legend>学生成绩录入</legend>
<div>
<span>姓名:</span>
<input type="text" placeholder="请输入姓名" v-model="newPerson.name" />
</div>
<div>
<span>年龄:</span>
<input type="text" placeholder="请输入年龄" v-model="newPerson.age" />
</div>
<div>
<span>性别:</span>
<select v-model="newPerson.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<span>手机号:</span>
<input type="text" placeholder="请输入手机号" v-model="newPerson.phone" />
</div>
<button @click="createPerson()">创建新用户</button>
</fieldset>
<table>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>手机号</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in persons">
<td >{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>{{item.phone}}</td>
<td><button @click="deletePerson(index)">删除</button></td>
</tr>
</tbody>
</table>
javaScript代码:
new Vue({
el:'#app',
data:{
persons:[
{name:'张三',age:15,sex:'男',phone:456123},
{name:'李四',age:14,sex:'女',phone:456123},
{name:'张思德',age:42,sex:'男',phone:456123},
{name:'玉林',age:25,sex:'男',phone:456123},
],
newPerson:{name:'',age:0,sex:'男',phone:''}
},
methods:{//实例的所有函数实现
//1.创建一条person记录
createPerson(){
//条件提交
if(this.newPerson.name===''){
alert('name can not null');
return;
}
if(this.newPerson.age<0){
alert('age can not <0');
return;
}
if(this.newPerson.phone===''){
alert('phone can not null');
return;
}
//往数组中添加数据
this.persons.unshift(this.newPerson);
//添加完数据清空数据
this.newPerson={name:'',age:0,sex:'男',phone:''}
},
//2.删除一条记录
deletePerson(index){
this.persons.splice(index,1);
}
}
});
运行结果:
这是本人个人在学习的过程中总结的,大家有任何疑问,请及时留言讨论哦