-
v-if
-
v-else-if
-
v-else
-
v-text:会原样输出数据内容
-
v-html:会对html格式进行解析操作
-
v-show
-
v-for:循环
-
v-bind：单向数据绑定
-
v-model：双向数据绑定
-
v-on：事件
-
v-pre：里面的内容不会进行插值表达式显示，会原样显示 {{content}}
-
v-cloak：{{表达式}} 的渲染需要一定的时间，如果网速慢，则会出现 {{}} 显示在界面上的情况，所以需要 [v-cloak] {display: none;} 控制它的显示为none，如果表达式已经渲染好了。那么display: none则不会起作用，页面也会正常渲染
-
v-once：只会进行一次渲染，渲染完以后不会再次渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue的内置指令</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- TODO:内置指令的熟悉 -->
<!-- 判断条件需要加引号包裹，如果不包裹则会当作vue里的元素 -->
<div v-if="type==='A'">
<p>A</p>
</div>
<div v-else-if="type==='B'">
<p>B</p>
</div>
<div v-else-if="type==='C'">
<p>C</p>
</div>
<div v-else>
<p>不是ABC</p>
</div>
<!-- v-text是文本，回原样输出数据内容 -->
<div v-text="content"></div>
<!-- v-html 会对html格式进行解析操作 -->
<div v-html="content"></div>
<!--
v-if和v-show在什么时候进行使用，频繁显示与隐藏操作的内容，
比如下拉菜单，弹出菜单，可以用v-show
-->
<div v-show="show">show显示</div>
<ul>
<li v-for="(item,index) in list" :key="item">{{item}}</li>
</ul>
{{title}}
<input type="text" v-bind:value="title">
<button v-on:click="changeTitle">点击修改标题</button>
<input type="text" v-model="title">
<!-- v-pre 里面的内容不会进行插值表达式显示，会原样显示 {{content}} -->
<p v-pre>{{content}}</p>
<!--
{{表达式}} 的渲染需要一定的时间，如果网速慢，则会出现 {{}} 显示在界面上的情况
所以需要 [v-cloak] {display: none;} 控制它的显示为none
如果表达式已经渲染好了。那么display: none则不会起作用，页面也会正常渲染
-->
<div v-cloak>{{content}}</div>
<!-- 只会进行一次渲染，渲染完以后不会再次渲染，如果点击修改标题则这个p标签不会起效果 -->
<p v-once>{{title}}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
title: '标题',
content:
'<div><b>内容</b><a href="http://www.baidu.com">baidu</a></div>',
type: 'B',
show: true,
list: ['A', 'B', 'C'],
},
methods:{
changeTitle(){
this.title="changeTitle"
}
}
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
