v-html 更新元素的 innerHTML
<template>
<div>
<h1 v-html="x1"></h1>
</div>
</template>
<script>
export default {
data() {
return {
x1: "<h1>我是页面</h1>",
};
},
computed: {},
methods: {},
};
</script>
渲染的结果为 ：
v-show 根据表达式之真假值，切换元素的 display
<template>
<div>
<!-- 根据表达式之真假值，切换元素的 display 而不是彻底消失-->
<h1 v-show="isBool">显示元素</h1>
</div>
</template>
<script>
export default {
data() {
return {
isBool: true,//为true时 页面元素显示 为false时隐藏
};
},
computed: {},
methods: {},
};
</script>
v-if v-else-if v-else条件渲染
<template>
<div>
<!--
根据表达式的值来有条件地渲染元素。在切换时元素及它的数据绑定
/ 组件被销毁并重建。如果元素是 `<template>`，将提出它的内容作为
条件块。当条件变化时该指令触发过渡效果
-->
<h1 v-if="count === 1"> A </h1>
<h1 v-else-if="count === 2"> B </h1>
<h1 v-else-if="count === 3"> C </h1>
<h1 v-else> D </h1>
</div>
</template>
<script>
export default {
data() {
return {
count: 1,
};
},
computed: {},
methods: {},
};
</script>
输出A 当count不匹配任何一个时 会走最后的v-else 页面显示D
v-for 渲染 key值可操作范围
<template>
<div>
<!--
1、index可以当key值 但是可能有问题
2、时间戳也不能当key值
3、Math.random()也不可以当key值 因为每次的key值都不一样 找不到之前的值
第一次渲染 真实DOM
操作之后 虚拟DOM
// diff 算法：虚拟DOM && 真实DOM 根据key
-->
<div v-for="{ id, title } in data" :key="id">
{{ title }}
<input />
</div>
<!--
***!注意: 当和 v-if 一起使用时，v-for 的优先级比 v-if 更高
-->
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ id: 1, title: "小郑" },
{ id: 2, title: "小史" },
{ id: 3, title: "小张" },
{ id: 4, title: "小王" },
],
};
},
computed: {},
methods: {},
};
</script>
v-on 绑定事件监听器 简写@
<el-button type="primary" @click="onClick">点击</el-button>
methods: {
// 对应上面的点击事件
onClick() {
this.data.splice(1, 1);
console.log("1");
},
},
v-bind 动态地绑定一个或多个属性，或一个组件 prop 到表达式。缩写 : (冒号)
<!-- 动态属性名 -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc">
v-model 在表单控件或者组件上创建双向绑定
// 适用于：
- <input>
- <select>
- <textarea>
// 使用：
<!-- v-model双向绑定 -->
<el-input v-model="input" placeholder="请输入内容"></el-input>
<h1>input:{{ input }}</h1>
修饰符：
1、lazy 取代input监听change事件 2、number 输入字符串转为有效的数字 3、trim 输入首尾空格过滤
