Vue3.0商店后台管理系统项目实战-模板语法

王小婷

发布于 2022-10-28 15:09:05

4910

发布于 2022-10-28 15:09:05

文章被收录于专栏：编程微刊

基本语法

1：v-text

<template>
  <h1>hello world!</h1>
  <p v-text="name"></p>
  <!-- v-text的简写 -->
  <p>{{ name }}</p>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "home",
  setup() {
    const data = reactive({
      name: "王婷",
      age: 20,
    });

    return {
      ...toRefs(data),
    };
  },
};
</script>

2:v-html

<template>
  <h1>hello world!</h1>
  <p v-text="name"></p>
  <!-- v-text的简写 -->
  <p>{{ name }}</p>

  <p>{{info}}</p>
  <p  v-html="info"></p>

</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "home",
  setup() {
    const data = reactive({
      name: "王婷",
      age: 20,
      info:"<i>我是斜体字</i>"
    });

    return {
      ...toRefs(data),
    };
  },
};
</script>

3:v-bind

v-bind:属性名=“变量名” 绑定动态的标签属性

  <!-- v-bind绑定动态的标签属性 -->
  <p v-bind:data="dataVal">我有属性data</p>

setup() {
    const data = reactive({
      
      dataVal:20
    });

    return {
      ...toRefs(data),
    };
  },

简写：

：属性名=“变量名”

class类名绑定省略v-bind

<!-- class类名绑定 省略v-bind -->
<p :class="{'red':isRed}">我是红色的</p>

setup() {
    const data = reactive({
      isRed:true
    });

    return {
      ...toRefs(data),
    };
  },

图片.png

  <!-- class类名绑定 省略v-bind -->
  <p :class="{'red':!isRed}">我是红色的</p>

图片.png

4:v-if

判断语句 v-show搭配使用

当变量为true的时候两个标签没有什么区别都是存在于页面的

<p  v-if="isTrue">我是if存在</p>
<p v-show="isTrue">我是show展示</p>

setup() {
    const data = reactive({
      isTrue:true,
      isFalse:false
    });

    return {
      ...toRefs(data),
    };
  },

<p  v-if="!isTrue">我是if存在</p>
<p v-show="!isTrue">我是show展示</p>

在页面上 v-if v-show都是不可见的

但区别在于 v-if false的时候是元素上的隐藏（未渲染在页面） v-show false的时候是样式上的隐藏元素存在

5：for循环

<template>
  <div>
    <h1>hello world!</h1>
    
    <!-- for循环 -->
    <!-- 循环此数组userList -->
    <!-- v-for="(每一个对象的变量，下标)  in 数组" -->
    <ul>
      <li v-for="(item, index) in userList" :key="index">
        姓名{{ item.username }} 年龄：{{ item.userage }}
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "home",
  setup() {
    const data = reactive({
      userList: [
        {
          username: "王婷",
          userage: 20,
        },
        {
          username: "肖战",
          userage: 20,
        },
        {
          username: "小五",
          userage: 20,
        },
        {
          username: "演中",
          userage: 29,
        },
      ],
    });

    return {
      ...toRefs(data),
    };
  },
};
</script>
<style>
.red {
  color: red;
}
</style>