2. Vue指令
2018-11-19 本文已影响0人
dwy_interesting
指令：v-xxx
用于动态操作某些数据
v-bind:
image.png
v-html:
image.png
v-if: // v-else:条件渲染(不需要频繁切换且安全性较高的界面)
image.png
v-show:条件渲染(需要循环渲染及权限或安全性不需要很高的界面)
image.png
v-for:循环迭代显示
image.png
image.png
对于对象
image.png
image.png
image.png
image.png
对于迭代（循环输出）
image.png
image.png
v-cloak:配合style使用：解决预加载显示问题
image.png
v-model:数据双向绑定
例一：点击单选按钮打印出对应需要输出的内容
<body>
<div id="app">
<!-- v-model直接实现了双向绑定 -->
<label><input type="radio" v-model="gender" value="M">男</label>
<label><input type="radio" v-model="gender" value="F">女</label>
<label><input type="radio" v-model="gender" value="U">人妖</label>
{{gender}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
gender: ''
}
})
</script>
</body>
例二：选择复选框打印出选中所有选项所需输出内容
<body>
<div id="app">
<!-- v-model直接实现了双向绑定 -->
<label><input type="checkbox" v-model="hobby" value="M">男</label>
<label><input type="checkbox" v-model="hobby" value="F">女</label>
<label><input type="checkbox" v-model="hobby" value="U">人妖</label>
{{hobby}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
// 筛选框的数据格式应该是一个数组
hobby: []
}
})
</script>
</body>
例三：关于v-model修饰符
<body>
<div id="app">
<!-- model的lazy修饰符，在input的时候不会更新，只有在change的时候才会更新 -->
<input
type="text"
v-model.lazy="inputValue"
>
{{inputValue}}
<!-- number修饰符，会尝试去把输入转化为数字， 如果 转换失败，保留原值, 这个检验不靠谱，所以我们还是不要相信用户的输入 -->
<!-- 当输入值第一个字符或默认值为数字时，才会验证其后面输入是否为数字 -->
<input
v-model.number="age"
>
age: {{age}}
<!-- 自动过滤用户输入的首尾空白字符 -->
<input
v-model.trim="test"
>
trim: {{test}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
inputValue: '',
age: 12,
test: ''
}
})
</script>
</body>
