上期回顾
- Mustache语法
- v-once语法
- v-html语法
- v-text语法和v-pre语法
- v-bind语法
- 计算属性（computed）
- 事件监听（v-on指令）
条件判断(v-if、v-show)
- 基本语法使用
<div id="app">
<!-- v-if 与 v-show 比较 -->
<p v-if="score >= 85">优秀</p>
<p v-else-if="score >= 60">及格</p>
<p v-else="score < 60">挂科</p>
<p v-show="isShow1">要显示</p>
<p v-show="isShow2">不要显示</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score:72,
isShow1:true,
isShow2:false
}
})
</script>
v-if 与 v-show 比较
- v-if、v-else-if、v-else：当后面的条件为false时，对应的元素以及其子元素不会渲染。也就是对应的标签不会出现在DOM树中。
v-show：当v-show后面的条件为false时，仅是在标签上添加 diaplay:none 样式，其内容还是会出现在DOM树中
开发时选择：- 如果需要频繁切换显示与隐藏，使用v-show
- 只有一次判断是否显示，使用v-if
条件渲染案例
- 用户登录时，选择使用账号登录或邮箱登录
<div id="app">
<div v-if="type === 'account'">
<label for="account">账号：</label>
<input type="text" placeholder="输入账号" id="account">
</div>
<div v-else>
<label for="email">邮箱：</label>
<input type="text" placeholder="输入邮箱" id="email">
</div>
<button @click="toggle">点击切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
type: "account"
},
methods: {
toggle() {
this.type = this.type === "account" ? "email" : "account"
}
},
})
</script>
账户登录输入123
点击切换到邮箱登录
- 出现的问题：
如果在账户登录中输入了内容，在切换到邮箱登录后，内容没有被清除掉- 解答：
Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。所以，在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。- 解决方法：
给对应的input添加key，但是要保证key不同，如下：
<div id="app">
<div v-if="type === 'account'">
<label for="account">账号：</label>
<input type="text" placeholder="输入账号" id="account" key="account">
</div>
<div v-else>
<label for="email">邮箱：</label>
<input type="text" placeholder="输入邮箱" id="email" key="email">
</div>
<button @click="toggle">点击切换</button>
</div>
循环遍历(v-for)
- 基本语法使用
<div id="app">
<!-- 遍历数组,方式1 -->
<ul>
<li v-for="item in loves" :key="item">{{item}}</li>
</ul>
<!-- 遍历数组,方式2 -->
<ul>
<li v-for="(value,index) in loves" :key="index">{{index}} - {{value}}</li>
</ul>
<!-- 遍历对象,方式1 -->
<ul>
<li v-for="item in obj" :key="item">{{item}}</li>
</ul>
<!-- 遍历对象,方式2 -->
<ul>
<li v-for="(value,key) in obj" :key="key">{{key}} - {{value}}</li>
</ul>
<!-- 遍历对象,方式3 -->
<ul>
<li v-for="(value,key,index) in obj" :key="index">{{key}} - {{value}} - {{index}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
loves: ["篮球", "听音乐", "喝咖啡", "棒棒糖", "阅读", "写代码"],
obj: {
name: "Kevin",
age: 12,
high: "1.98"
}
}
})
</script>
v-for使用
:key属性：官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。而且，同一个v-for中每个:key应该互不相同
key属性与Vue的虚拟DOM的Diff算法有关系：具体了解点击这里
表单绑定(v-model)
- 基本语法使用
<div id="app">
<div>==============输入框===============</div>
<input type="text" v-model="message1">
<p>input输入的内容：{{message1}}</p>
<textarea v-model="message2"></textarea>
<p>textarea输入的内容：{{message2}}</p>
<div>==============单选框===============</div>
<label>
<input type="radio" value="male" v-model="gender" id="male">男
</label>
<label>
<input type="radio" value="female" v-model="gender" id="female">女
</label>
<p>你的选择是：{{gender}}</p>
<div>==============复选框===============</div>
<!-- 单个复选框 -->
<label for="check">
<input type="checkbox" v-model="checked" id="check">同意xxx协议
</label>
<p>你的选择：{{checked}}</p>
<!-- 多个复选框 -->
<label><input type="checkbox" v-model="loves" value="篮球">篮球</label>
<label><input type="checkbox" v-model="loves" value="足球">足球</label>
<label><input type="checkbox" v-model="loves" value="羽毛球">羽毛球</label>
<p>你的选择：{{loves}}</p>
<div>==============下拉选择===============</div>
<!-- 单选 -->
<select v-model="mySelect">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
</select>
<p>你的单选结果：{{mySelect}}</p>
<!-- 多选 -->
<select v-model="mySelects" multiple>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
</select>
<p>你的多选结果：{{mySelects}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message1: "",
message2: "",
gender: "",
checked:"",
loves:[],
mySelect:"",
mySelects:[]
}
})
</script>
v-model使用
v-model语法
v-model总结：
1.v-model指令实现表单元素和数据的双向绑定。
2.使用v-model指令，可以省略选择框中的name属性
v-model原理
<input type="text" v-model="message">
<!-- 等同于 -->
<input type="text" :value="message" @input="message = $event.target.value">
v-model其实是一个语法糖，它的背后本质上是包含两个操作：
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
v-model 修饰符
<div id="app">
<input type="text" v-model.lazy="message">
<p>你的输入：{{message}}</p>
身高：<input type="number" v-model.number="high">
<p>身高：{{high}} 数据类型{{typeof high}}</p>
<input type="text" v-model.trim="message2">
<p>你的输入：====={{message2}}======</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "",
high:"",
message2:""
}
})
</script>
v-model修饰符
- lazy修饰符：
默认情况下，v-model默认是在input事件中同步输入框的数据的。lazy修饰符可以让数据在失去焦点或者回车时才会更新- number修饰符：
默认情况下，在输入框输入的信息都会被当做字符串类型进行处理。number修饰符可以让在输入框中输入的内容自动转成数字类型- trim修饰符：
trim修饰符可以去除内容左右两边的空格
拓展：数组的响应式方法
举例哪些数组方法可以响应式改变页面内容
//push方法
this.arr.push("apple")
//pop方法
this.arr.pop()
//shift方法
this.arr.shift()
//unshift方法
this.arr.unshift("apple")
//splice方法
this.arr.splice(2)
//sort方法
this.arr.sort()
//reverse方法
this.arr.reverse()
//直接利用下标修改数据不会修改页面
this.arr[1] = "pear"
//可以用下面方法修改
this.arr.splice(1,1,"pear")
Vue.set(this.arr,1,"pear")
END
网友评论