基本语法
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>
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>
