介绍
这篇文章将为大家详细讲解有关Vue.js中有哪些常用的指令,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强> 1。数据渲染:v-text, v-html,{{}}
<强> 1.1 v-text
详细:更新元素的textContent。如果要更新部分的textContent,需要使用{{胡子}}插值。
实例:
& lt; div id=癮pp"比;
,& lt; p v-text=癿essage"祝辞& lt;/p>
& lt;/div>
& lt; script>
Vue ({new 才能;
,,,el: & # 39; #应用# 39;
数据:,,,,{
,,,,,的信息:& # 39;Hello 世界! & # 39;
,,,}
,,});
& lt;/script> <强> 1.2{{}}和上面的v-text效果一样
实例:
& lt; div id=癮pp"比;
,& lt; p>{{消息}}& lt;/p>
& lt;/div>
& lt; script>
Vue ({new 才能;
,,,el: & # 39; #应用# 39;
数据:,,,,{
,,,,,的信息:& # 39;Hello 世界! & # 39;
,,,}
,,});
& lt;/script> <强> 1.3 v-html
详细:更新元素的innerHTML。注意:内容按普通HTML插入,不会作为Vue模板进行编译。如果试图使用v-html组合模板,可以重新考虑通过是否通过使用组件来替代。
注意:在网站上动态渲染任意HTML是非常危险的,因为容易导致XSS攻击。只在可信内容上使用v-html,永不用在用户提交的内容上。
实例:
& lt; div id=癮pp"比;
,& lt; p v-html=癿essage"祝辞& lt;/p>
& lt;/div>
& lt; script>
Vue ({new 才能;
,,,el: & # 39; #应用# 39;
数据:,,,,{
,,,,,的信息:& # 39;& lt; h6> hello vue.js & # 39;
,,,}
,,});
& lt;/script> <强> 2。条件渲染控制模板隐藏:v-show, v, v-else
<强> 2.1 v-show
用法:根据表达式之真假值,切换元素的显示CSS属性。当条件变化时该指令触发过渡效果。
注意:v-show不支持& lt; template>语法
实例:
& lt; div id=癮pp"比;
,& lt; p v-show=癷sShow"比;
展示才能
,& lt;/p>
& lt;/div>
& lt; script>
Vue ({new 才能;
,,,el: & # 39; #应用# 39;
数据:,,,,{
,,,,,isShow:没错
,,,}
,,});
& lt;/script> <强> 2.2 v
v-show和v大体效果相同,不同的是:v-show的元素会始终渲染并保持在DOM中。
用法:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定/组件被销毁并重建。如果元素是& lt; template>,
将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。
实例:
& lt; div id=癮pp"比;
,& lt; p v=癷sShow"比;
展示才能
,& lt;/p>
& lt;/div>
& lt; script>
Vue ({new 才能;
,,,el: & # 39; #应用# 39;
数据:,,,,{
,,,,,isShow:假的
,,,}
,,});
& lt;/script> <强>,2.3 v-else
限制:前一兄弟元素必须有v或v-else-if
用法:为v或者v-else-if添加“块”
& lt; div id=癮pp"比;
,& lt; p v=癷sShow"祝辞show
,& lt; p v-else> hide</p>
& lt;/div>
& lt; script>
Vue ({new 才能;
,,,el: & # 39; #应用# 39;
数据:,,,,{
,,,,,isShow:没错
,,,}
,,});
& lt;/script> <强> 2.4 v-else-if
& lt; div id=癮pp"比;
,& lt; p v=皌ype ===, & # 39;一个# 39;“祝辞A
,& lt; p v-else-if=皌ype===& # 39; b # 39;“祝辞B
,& lt; p v-else> C</p>
& lt;/div>
& lt; script>
Vue ({new 才能;
,,,el: & # 39; #应用# 39;
数据:,,,,{
,,,,,类型:& # 39;b # 39;
,,,}
,,});
& lt;/script> <强> 3。v代表渲染循环列表
用法:基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语在表达法别名,为当前遍历的元素提供别名:
v代表默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,您需要提供一个关键的特殊属性:
实例:
& lt; body>
,& lt; div id=癮pp"比;
& lt;才能ul>
,,& lt; li v=癷tem items",拷贝:关键=癷tem.id"在{{item.name}} & lt;/li>
& lt;才能/ul>
,& lt;/div>
,& lt; script>
,,Vue ({new
,,,,el: & # 39; #应用# 39;
,,,,数据:,{
,,,,,项目:(
,,,,,,,{名称:& # 39;hxl& # 39;},
,,,,,,,{名称:& # 39;zp # 39;},
,,,,,,,{名称:& # 39;hxlzp& # 39;},
,,,,,,
,,,,}
,,});
,& lt;/script>
