条件渲染
博客专区 > AK灬 的博客 > 博客详情
条件渲染
AK灬 发表于1年前
条件渲染
  • 发表于 1年前
  • 阅读 44
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

<html>
	<head>
		<title>VUE.JS实例</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="C:/Users/Administrator/Desktop/jar/jquery-1.11.2.min.js"></script>
	</head>
	<body>
		<!-- 条件渲染 -->
		<h1 v-if="ok">YES</h1>
		<h1 v-else>NO<h1>
		<!-- template-->
		<template v-if = "ok">
			<h1>Title</h1>
			<p>Paragraph1</p>
			<p>Paragraph2</p>
		</template>
		<!-- v-else -->
		<!-- v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。-->
		<div v-if = "Math.random()>0.5">
			Now you see me!
		</div>
		<div v-else>
			Now you don't me!
		</div>
		<!-- v-else-if -->
		<div v-if="type === 'A'">
			A
		</div>
		<div v-else-if="type === 'B'">
			B
		</div>
		<div v-else-if="type === 'C'">
			C
		</div>
		<div v-else>
			Not A/B/C
		</div>
		<!-- KEY管理可复用的元素 -->
		<div id="key-example">
			<template v-if="loginType === username">
				<label> Username</label>
				<input placeholder="Enter Your Username" key="usernamei-input"></input>
			</template>
			<template v-else>
				<label>Email</label>
				<input placeholder="Enter Your Email Address" key="email-input"></input>
			</template>
			<button v-on:click="toggleLoginType">Change</button>
		</div>
		<h1 v-show="ok">Hello!</h1>
		<!-- 列表渲染 -->
		<ul id="example-1">
			<li v-for="item in items">
				{{item.message}}
			</li>
		</ul>
		<ul id="example-2">
		  <li v-for="(item, index) of items">
			{{ parentMessage }} - {{ index }} - {{ item.message }}
		  </li>
		</ul>
		<ul id="example-3">
		  <template v-for="item in items">
			<li>{{ item.msg }}</li>
			<li class="divider">空白行</li>
		  </template>
		</ul>
		<div id="example-4">
		  <span v-for="n in 10">{{ n }}</span>
		</div>
		<div id="todo-list-example">
		  <input
			v-model="newTodoText"
			v-on:keyup.enter="addNewTodo"
			placeholder="Add a todo"
		  >
		  <ul>
			<li
			  is="todo-item"
			  v-for="(todo, index) in todos"
			  v-bind:title="todo"
			  v-on:remove="todos.splice(index, 1)"
			></li>
		  </ul>
		</div>
		<script>
			new Vue({
			  el: '#key-example',
			  data: {
				loginType: 'username'
			  },
			  methods: {
				toggleLoginType: function () {
				  return this.loginType = this.loginType === 'username' ? 'email' : 'username'
				}
			  }
			});
			var example1 =  new Vue({
				el : '#example-1',
				data : {
					items : [
						{message : '吃饭'},
						{message : '睡觉'},
						{message : '洗澡'},
					]
				}
			});
			var example2 = new Vue({
			  el: '#example-2',
			  data: {
				parentMessage: 'Parent',
				items: [
				  { message: 'Foo' },
				  { message: 'Bar' }
				]
			  }
			});
			var example3 = new Vue({
				el: '#example-3',
				data: {
				parentMessage: 'Parent',
				items: [
				  { msg: 'Foo' },
				  { msg: 'Bar' }
				]
			  }
			});
			var example4 = new Vue({
				el : '#example-4',
			});
			Vue.component('todo-item', {
			template: '\
				<li>\
				  {{ title }}\
				  <button v-on:click="$emit(\'remove\')">X</button>\
				</li>\
			  ',
			  props: ['title']
			})
			new Vue({
			  el: '#todo-list-example',
			  data: {
				newTodoText: '',
				todos: [
				  'Do the dishes',
				  'Take out the trash',
				  'Mow the lawn'
				]
			  },
			  methods: {
				addNewTodo: function () {
				  this.todos.push(this.newTodoText)
				  this.newTodoText = ''
				}
			  }
			})
		</script>
	</body>
</html>

 

标签: Vue.js
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
AK灬
粉丝 46
博文 322
码字总数 135591
×
AK灬
谢谢观众老爷们的赏赐,小弟我会再接再厉的!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: