v-model
表单元素使用
如:
1.input输入框
type='radio'
type='checkbox'
type='xxxx'
2.textarea
3.select
<body>
<div id="app">
<p>用户的名字是{{ username }}</p>
<hr>
<input type="text" v-model='username'>
<hr>
<select v-model='food'>
<option value="">请选择食物</option>
<option value="1">面</option>
<option value="2">米</option>
<option value="3">汤</option>
<option value="4">菜</option>
<option value="5">肉</option>
</select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
<script>
const vm = new Vue({
el: '#app',
data: {
username: '张三',
food: '',
},
method: {
},
})
</script>
</body>
<!-- 数据源改动同步到页面,页面改动也会同步到数据源 -->
<!-- v-bind只能单向的将数据源同步到页面 -->
<!-- food值默认空便默认显示了'请选择食物' 更改food值改变默认显示 -->
<!-- 在页面选择其他选项时food的值也相应的在数据源改变 -->v-model的指令修饰符
.number
.trim
.lazy
<body>
<div id="app">
<!-- 超过两位后会变成字符串的拼接所以需要转为number -->
<input type="text" v-model.number='n1'>+<input
type="text"
v-model.number='n2'>=<span>{{ n1+n2 }}</span>
<hr>
<!-- 获取和失去焦点时会自动去除掉空格 但像这样 如"me is good boy "
字符间的空格不会去除 在 me 前有若干空格都会去除-->
<input type="text" v-model.trim='username'>
<button @click='name'>获取用户名</button>
<hr>
<!-- 在"change"时更新而非"input"时更新 也就是在失去焦点时更新数据
不同于上面是在实时的更新数据-->
<input type="text" v-model.lazy='username'>
<button @click='name'>获取用户名</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
<script>
const vm = new Vue({
el: '#app',
data: {
n1: '',
n2: '',
username: '',
},
methods: {
name() {
console.log(`"${this.username}"`)
}
}
})
</script>
</body>条件渲染指令
辅助开发者按需控制DOM的显示与隐藏
v-if
v-else
v-show
<body>
<div id="app">
<!-- 每次动态的创建或移除元素实现元素的显示和隐藏
如果刚进页面的时候某些元素默认不需要展示,而且后期
也不可能不需要被展示,此时v-if性能更好 -->
<!-- 靠 不需要不写不行吗我淦 你电脑应该也不缺这点
性能吧 x.x -->
<p v-if='flag'>这是v-if控制的元素</p>
<!-- 动态的为元素添加或移除display:none的样式来实现
元素的显示与隐藏 如果需要频繁的切换元素的显示状态
用 v-show -->
<!-- 在实际开发中一般都是用v-if -->
<p v-show='flag'>这是v-show控制的元素</p>
<hr>
<!-- v-if可以单独使用 但v-else 只能配套v-if使用
否则不会识别 类似于JS中的 else if 如下 成绩为A则显示优秀其它不会显示
不为A则逐个判断 都不符合会显示else所对应的-->
<div v-if='type === "A"'>优秀</div>
<div v-else-if='type === "B"'>良好</div>
<div v-else-if='type === "C"'>一般</div>
<div v-else='type === "D"'>差</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
<script>
const vm = new Vue({
el: '#app',
data: {
flag: true,
type: "B",
},
methods: {
},
})
</script>
</body>列表渲染指令
v-for
<body>
<div id="app">
<table class="table table-bordered table-hover table-striped">
<thead>
<th>索引</th>
<th>Id</th>
<th>书名</th>
</thead>
<tbody>
<!-- v-for
用来辅助开发者基于一个数组来循环渲染一个列表结构
用item in items形式的特殊语法
items是待循环的数组 item是循环的每一项-->
<!-- 如下
index是索引 若不需要索引只有item就不用写小括号
item和index不是固定名称可以按需求修改 -->
<tr v-for="(item,index) in list" :title="item.name">
<td>{{ index }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
<script>
const vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: '1984' },
{ id: 2, name: '罪与罚' },
{ id: 3, name: '局外人' }
]
},
})
</script>
</body>为了防止列表状态紊乱 官方推荐用到v-for一定要绑定一个:key属性 并将id作为key的值 key值得类型只能是字符串或数字类型 key值不可重复 否则会终端报错:Duplicat keys detected
index值不具有唯一性所以不当key的值