vue2基础命令笔记整理

v-model

v-model 是vue中用来绑定表单值的用法入下

单选框用法

<!-- 单选框 与v-model使用-->
//新建两个单选框
<div id="app">
	<input type="radio" value="男" name="gender" v-model="sex">男
	<input type="radio" value="女" name="gender" v-model="sex">女
	{{sex}}  //这里就会显示你选的那个单选框的值
<div/>
const vm = new Vue({
	el:"#app",  //挂载的元素
	data:{
		sex:'',
	}
})

多选框用法

<!--多选框使用-->
	<div id="app">
		<input type="checkbox" v-model="likes" value="香蕉">香蕉
        <input type="checkbox" v-model="likes" value="芒果">芒果
        <input type="checkbox" v-model="likes" value="榴莲">榴莲
      你爱吃的水果是-- {{likes}}    //这里选几个就会显示几个
	<div/>
	const vm = new Vue({
		el:"#app",
		data:{
			likes:[]
		}
	})

注意点
v-model 是直接跟表单的value值绑定的, 修改model绑定的值,表单值就会跟着变化

v-if 与 v-show

v-if 和 v-show 后面是布尔值,为true就是显示 false就是不显示

<div id="app">
	<h1 v-if="isTrue">我是v-if</h1>  //显示 可以通过控制isTrue这个值的变化来控制显示隐藏这个元素
	<h1 v-show="isShow">我是v-show</h1>   //不显示
<div/>
const vm = new Vue({
		el:"#app",
		data:{
			isTrue:true,
			isShow:false
		}
	})

注意点
v-if网页渲染的时候,如何条件成立就会渲染,v-if不管条件成不成立都会渲染

v-if 显示与不显示两者之间切换,元素是真正的从dom中移除销毁了,如果频繁的显示隐藏,
我们还是选择v-show会比较好一点,性能会比v-if好,

v-show 的显示隐藏切换,元素没有直接销毁,只是设置了样式隐藏 display:none