指令 |
用法 |
v-html |
按照HTML格式进行解析,同时显示对应的内容 |
v-once |
元素和组件只渲染一次,后面不需要接表达式 |
v-bind |
绑定动态的数据,绑定一个或多个属性值;向另一个组件传递props值,简写“:” |
v-on |
绑定事件,简写@“” |
v-for |
主要用于循环遍历 |
v-if |
条件渲染指令 |
v-show |
条件渲染指令 |
v-model |
实现表单元素和数据的双向绑定 |
链接: vue中v-if和v-show的区别
<template>
<div class="ZhiLing">
<!-- v-html:按照HTML格式进行解析,同时显示对应的内容-->
<p v-html="a"></p>
<!-- v-once:元素和组件只渲染一次,后面不需要接表达式-->
<p>{
{
message }}</p>
<p v-once>{
{
message }}</p>
<button @click="message='你好啊'">改变message</button>
<!-- v-bind:绑定动态的数据,绑定一个或多个属性值;向另一个组件传递props值-->
<img v-bind:src="url">
<!-- v-bind语法糖:-->
<!-- <img :src="url">-->
<!-- v-on:绑定事件-->
<p>{
{
age }}</p>
<!-- <button v-on:click="age++">点击添加</button>-->
<!-- v-on语法糖@-->
<button @click="age++">点击添加</button>
<!--v-for:循环遍历-->
<div v-for="item in list" :key="item.id">{
{
item.name }}</div>
<!-- v-if:条件渲染指令-->
<p v-if="age<18">成年人</p>
<p v-else>未成年人</p>
<!-- v-show:条件渲染指令-->
<p v-show="age<18">成年人</p>
<!-- v-model:实现表单元素和数据的双向绑定-->
<input type="text" v-model="message">
</div>
</template>
<script>
export default {
name: "ZhiLing",
data() {
return {
a: "<a href='https://www.baidu.com'>百度一下</a>",
message: "hello world",
url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
age: 16,
list: [{
id: 1, name: "张三"}, {
id: 2, name: "李四"}, {
id: 3, name: "王五"}]
}
},
mounted() {
},
methods: {
}
}
</script>