Vuejs基础之：条件列表时间表单
Posted 工云IT技术
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vuejs基础之：条件列表时间表单相关的知识，希望对你有一定的参考价值。
1Vuejs之条件渲染
5.1 v-if VS v-show
•v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
•v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
•相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
•一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
5.1 v-if
•此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它，代码如图：
•可以用 v-else 指令给 v-if 或 v-show 添加一个 “else” 块，代码如图：
•v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display
5.2 条件渲染 Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<style type="text/css">
h1,h5,p,div{padding: 10px;}
</style>
</head>
<body>
<div id="demo">
<h1 v-if="ok">单独使用v-if</h1>
<h1 v-if="ok">也可以和v-else一起使用,true时显示</h1>
<h1 v-else>也可以和v-else一起使用,这行是false时显示</h1>
<template v-if="ok">
<h1>template显示1</h1>
<p>template显示1.1</p>
<p>template显示1.2</p>
</template>
<div v-if="Math.random() > 0.5">随机大于0.5</div>
<div v-else>随机小于0.5</div>
<div v-show="ok">如果ok为false,这个也会被渲染,只不过会增加display:none这个属性而已</div>
</div>
<script type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#demo',
data:{
ok:true
}
});
</script>
</body>
</html>
2Vuejs之列表渲染
6.1 v-for
•我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
6.1.1 基本语法
代码如图：
•v-for 还支持一个可选的第二个参数为当前项的索引。
•也可以用 of 替代 in 作为分隔符
6.1.2 Template v-for
•如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块。代码如图：
6.1.3 对象迭代 v-for
代码如图：
•也可以提供第二个的参数为键名
•第三个参数为索引
6.1.4 整数迭代 v-for
•v-for 也可以取整数。在这种情况下，它将重复多次模板。代码如图：
组件 和 v-for
•在自定义组件里，你可以像任何普通元素一样用 v-for。代码如图：
•然而他不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props。代码如图：
•不自动注入 item 到组件里的原因是，因为这使得组件会紧密耦合到 v-for 如何运作。在一些情况下，明确数据的来源可以使组件可重用。
6.1.5 列表渲染Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<style type="text/css">
h1,h5,p,div{padding: 10px;}
</style>
</head>
<body>
<div id="example">
<h1>基本语法</h1>
<ul>
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
<h1>template渲染</h1>
<ul>
<template v-for="item in items">
<li>{{ item.message }}</li>
<li class="divider">template渲染</li>
</template>
</ul>
<h1>对象渲染</h1>
<ul>
<li v-for="(key, value) in object">
{{ key }} : {{ value }}
</li>
</ul>
<h1>整数迭代</h1>
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
</div>
<script type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var example = new Vue({
el: '#example',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
</script>
</body>
</html>
6.2 数组更新检测
•当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
代码如图：
6.2.1 变异方法
•Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
•push()
•pop()
•shift()
•unshift()
•splice()
•sort()
•reverse()
6.2.2 重塑数组
•变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如： filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。代码如图：
6.2.3 注意事项
•由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
•当你直接设置一个项的索引时，例如： vm.items[indexOfItem] = newValue
•当你修改数组的长度时，例如： vm.items.length = newLength
•为了避免第一种情况，以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果， 同时也将触发状态更新：代码如图：
•避免第二种情况，使用 splice代码如图：
6.3 显示过滤/排序结果
•有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。代码如图：
•也可以使用在计算属性是不可行的 method 方法 (例如，在嵌套 v-for 循环中)。
6.4 数组更新检测Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染-数组更新检测</title>
<style type="text/css">h1,h5,p,div{padding: 10px;}</style>
</head>
<body>
<div id="example">
<h1>过滤-使用计算属性</h1>
<li v-for="n in evenNumbers">{{ n }}</li>
<h1>过滤-使用method</h1>
<li v-for="n in even(numbers)">{{ n }}</li>
</div>
<script type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var example = new Vue({
el: '#example',
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})
</script>
</body>
</html>
3Vuejs之事件处理器
7.1 监听事件
•Vue.js可以通过监听Dom上的一些操作，来进行事件绑定
§可以用v-on指令监听DOM事件来触发一些JS代码，代码如图：
7.2 方法事件处理器
•如果事件处理的逻辑很复杂，可以定义一个方法，然后用v-on接收，代码如图：
7.3 内联处理器方法
•可以在v-on里内联js语句，代码如图：
•$event
7.4 事件修饰符
•通过点号打头的指令后缀调用修饰符
§.stop
§.prevent
§.capture
§.self
7.5 按键修饰符
•检测键盘事件，检测常见的键值
§enter
§tab
§delete
§esc
§space
§up
§down
§left
§right
7.6 为什么要在HTML中监听事件
•可以轻松地在HTML模板中定位js代码
•无须在js里绑定事件，完全解耦
•当ViewModel被销毁时，所有的事件处理器都会自动删除
7.7 事件处理器Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件处理器</title>
<style type="text/css">h1,h5,p,div{padding: 10px;}</style>
</head>
<body>
<div id="example">
<h1>监听事件</h1>
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
<h1>方法事件处理器</h1>
<button v-on:click="greet">Greet</button>
<h1>内联事件处理器</h1>
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
<h1>按键修饰符</h1>
<form><input v-on:keyup.enter="submit"></form>
</div>
<script type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var example = new Vue({
el: '#example',
data: {
counter: 0,
name:'vue.js'
},
methods: {
greet: function (event) {
alert('Hello ' + this.name + '!')// `this` 在方法里指当前 Vue 实例
alert(event.target.tagName)// `event` 是原生 DOM 事件
},
say: function (message) {
alert(message)
}
}
})
</script>
</body>
</html>
4Vuejs之表单控件绑定
8.1 基础用法
用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
8.1 基础用法
单个复选框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
new Vue({
el: '...',
data: {
checkedNames: []
}
})
单选按钮
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
单选列表
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
多选列表
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
动态列表
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
8.2 绑定Vue
对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
如果我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
复选框
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b">
8.3 修饰符
•.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
•.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
<input v-model.number="age" type="number">
•.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">
8.4 表单控件绑定用法Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单控件绑定</title>
<style type="text/css">h1,h5,p,div{padding: 10px;}</style>
</head>
<body>
<div id="example">
<h1>单行文本</h1>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<h1>多行文本</h1>
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="add multiple lines"></textarea>
<h1>复选框框</h1>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<span>Checked names: {{ checkedNames }}</span>
<h1>单选按钮</h1>
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label><br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label><br>
<span>Picked: {{ picked }}</span>
<h1>单选列表</h1>
<select v-model="selected">
<option>A</option><option>B</option><option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<h1>多选列表</h1>
<select v-model="selected2" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select><br>
<span>Selected: {{ selected2 }}</span>
<h1>修饰符</h1>
<input v-model.lazy="msg4" >
<input v-model.number="age3" type="number">
<input v-model.trim="msg5">
</div>
<script type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var example = new Vue({
el: '#example',
data: {
checkedNames: []
},
methods: {
}
})
</script>
</body>
</html>
本站代码下载方法：
以上是关于Vuejs基础之：条件列表时间表单的主要内容，如果未能解决你的问题，请参考以下文章