Vue命令:v-text v-html v-if v-show v-else v-else-if v-forの理解

v-text&v-html v-textは、対応するデータオブジェクト(data)の値を表示する純粋なテキストを操作するために使用されます.バインドされたデータオブジェクトの値が変更されると、補間先の内容も更新されます.注意:ここでは一方向バインドであり、データオブジェクトの値が変化し、補間が変化します.ただし、補間が変化すると、データ・オブジェクトの値には影響しません.ここで、v-textは{}}と略記でき、論理演算をサポートします.

	

		

		
{{text}}
//      
	
	
		new Vue({
			el: '#app',
			data: {
				msg: '<div>hello</div>'
			}
		});
	

参考

v-html用于更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

3.v-if & v-show
条件渲染v-if和v-show都是用来控制元素的渲染。
v-if判断是否加载，可以减轻服务器的压力，在需要时加载，但它有更高的切换开销（如果初始条件为false时不加载，除非等到true，才开始加载；在渲染条件切换时，相对应的条件块内的事件监听器和子组件会适当的销毁和重建）
v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销（v-show不管初始条件是否为真，都会被初始渲染。只是通过修改CSS属性display来控制显示与隐藏。 ）。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
特点：
v-if 的特点：每次都会重新删除或创建元素
v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display属性(行间样式element.style的display:none)
能耗：
v-if 有较高的切换性能消耗
v-show 有较高的初始渲染消耗
使用：
如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

4.v-else-if & v-else
与条件语句if-else和if-(else-if)-else的用法相同。

html:

	

		type = A
	
	

		type = B
	
	

			type = C
	
	

			not A/B/C
	

Vue.js:

	var vm = new Vue({
		el: '#demo',
		data: {
			type: 'B'
		}
	});

5.v-forソースデータに基づいて要素またはテンプレートブロックを複数回レンダリングします.このコマンドの値は、特定の構文alias in expressionを使用して、現在遍歴している要素に別名を指定する必要があります. {{item}} v-for命令はitem in items形式の特殊な構文を使用し、itemsはソースデータ配列であり、itemは配列要素反復の別名である.配列インデックスに別名(またはオブジェクト用のキー)を指定することもできます. // arr =[1, 2, 3] // arr=[{id:1, title:'hello'}, {id:2, 'hi'}]， ， // obj: {id: 1,name: 'superman',age: 100}， ， // obj: {id: 1,name: 'superman',age: 100}， ， ，
リファレンス