vue学习（二）表单渲染_表单渲染方式有哪些-优快云博客

本文链接：https://blog.youkuaiyun.com/java_chegnxuyuan/article/details/94437595

表单渲染可以分为条件渲染，列表渲染,事件处理，表单输入绑定。

1.条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。

<body>
		<div id="test">
			<button id="aaa" v-if="msg">显示</button>
			<button id="aaa" v-else="msg">不显示</button>
			
			<button v-if="num > 5">大于5</button>
			<button v-else-if="num == 5">等于5</button>
			<button v-else>小于5</button>
		</div> 
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				msg:false,
				num:5
			}
		})
	</script>

v-show指令：

<body>
		<div id="test">
			<button id="aaa" v-show="msg">显示</button>
		</div> 
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				msg:true
			}
		})
	</script>

v-show和v-if的区别：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

2.列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<body>
		<div id="test">
			<ul id="example-1">
				<li v-for="item in items">
				   {{ item.message }}
				</li>
			</ul>
		</div> 
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				items: [
			      { message: 'Foo' },
			      { message: 'Bar' }
			    ]
			}
		})
	</script>

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。

<body>
		<div id="test">
			<ul id="example-1">
				<li v-for="(item,index) in items">
				   {{ parentMessage }} - {{ index }} - {{ item.message }}
				</li>
			</ul>
		</div> 
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				parentMessage: 'Parent',
				items: [
			      { message: 'Foo' },
			      { message: 'Bar' }
			    ]
			}
		})
	</script>

在 v-for 里使用对象

<body>
		<div id="test">
			<ul id="example-1">
				<li v-for="(value,name,index) in object">
				  {{index}}:{{name}} {{ value }}
				</li>
			</ul>
		</div> 
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				object: {
			      title: 'How to do lists in Vue',
			      author: 'Jane Doe',
			      publishedAt: '2016-04-10'
			    }
			}
		})
	</script>

3.事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<body>
		<div id="test">
			<button v-on:click="counter += 1">Add 1</button>
  			<p>The button above has been clicked {{ counter }} times.</p>
  			<button @click="greet('test')">Greet</button>
		</div> 
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				counter:0
			},
			methods:{
				greet:function(msg){
					alert(msg)
				}
			}
		})
	</script>

2.1.4新增事件，点击只会触发一次

按键修饰符

<input v-on:keyup.enter="submit">只有当点击enter按钮时，才会触发。

按键码：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

需要注意的是keyup事件必须为input

<body>
		<div id="test">
			<button v-on:click="counter += 1">Add 1</button>
  			<p>The button above has been clicked {{ counter }} times.</p>
  			<button @click="greet('test')">Greet</button>
  			
  			<a v-on:click.once="doThis">一次</a>
  			<input v-on:keyup.113="ceshi">按键码</input>
		</div> 
	</body>
	
	<script>
		/*Vue.config.keyCodes.f2 = 113;*/
		var app = new Vue({
			el: '#test',
			data:{
				counter:0
			},
			methods:{
				greet:function(msg){
					alert(msg)
				},
				doThis:function(){
					alert(111)
				},
				ceshi:function(){
					alert("F1")
				}
			}
		})
	</script>

4.表单输入绑定

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

<body>
		<div id="test">  			
  			<input v-model="msg" placeholder="edit me">
			<p>Message is: {{ msg }}</p>
		</div> 
	</body>
	
	<script>
		
		var app = new Vue({
			el: '#test',
			data:{
				counter:0,
				msg:""
			},
		})
	</script>