VUE.JS 实践 第三章
目录
一、内容渲染指令
二、属性绑定指令
三、事件绑定指令
四、双向数据绑定指令
五、条件渲染指令
六、列表渲染指令
一、内容渲染指令
常见的内容渲染指令如下。
1、v-text
代码：创建src\components\VText.vue文件
<template> <div v-text="message"></div> </template> <script setup> const message = '<span>咬定青山不放松，立根原在破岩中</span>' </script>运行结果：
vue中 插值表达式 {{ }} 和 v-text 用法区别： https://blog.csdn.net/wakaka112233/article/details/106378750
2、v-html
代码：创建src\components\VHtml.vue文件
<template> <div v-html="html"></div> </template> <script setup> const html = '<strong>千磨万击还坚劲，任尔东西南北风</strong>' </script>运行结果
3、v-text 和v-html 的区别，
<template> <!-- 根节点只能有一个，所有内容包在一个 div 里 --> <div> <p v-text="message"></p> <div v-html="html"></div> <div v-html="html1"></div> </div> </template> <script setup> // 纯文本：v-text 会把标签当字符串输出 const message = '<span>咬定青山不放松，立根原在破岩中</span>' // v-html 会解析渲染HTML标记语言 const html = '<strong>千磨万击还坚劲，任尔东西南北风</strong>' const html1 = '<span style="color:red">千磨万击还坚劲，任尔东西南北风</span>' </script>输出结果
二、属性绑定指令
演示v-bind的使用方法
代码：创建src\components\VBind.vue文件
<template> <p><input type="text" v-bind:placeholder="username"></p> <p><input type="password" :placeholder="password"></p> </template> <script setup> const username = '请输入用户名' const password = '请输入密码' </script>运行结果
三、事件绑定指令
演示v-on的使用方法
<template> <button @click="showInfo">输出信息</button> <button @click="showInfo1">输出信息1</button> <p>{{ msg }}</p> </template> <script setup> const showInfo = () => { console.log('欢迎来到Vue.js的世界！') } import { ref } from 'vue' const msg = ref('') const showInfo1 = () => { msg.value = '欢迎来到Vue.js的世界！' } setTimeout(() => { msg.value = '欢迎来到Vue.js的世界1111！' }, 5000); </script>运行结果
四、双向数据绑定指令
v-model是什么？
- Vue 专门用来做表单双向绑定的指令
- 数据变 → 视图变；视图变 → 数据变
- 适用于：input、textarea、select 等表单元素
演示v-model的使用方法
<template> <!-- 视图变化，数据变化 --> 请输入姓名：<input type="text" v-model="username"> <div>姓名是：{{ username }} <p><button @click="sjbh">数据变化，视图改变</button></p> </div> </template> <script setup> import { ref } from 'vue' const username = ref('zhangsan') const sjbh=()=>{ username.value='李四' } </script>运行结果
.number 用法演示
<template> <!-- 视图变化，数据变化 --> 请输入姓名：<input type="text" v-model="username"> <div>姓名是：{{ username }} <p><button @click="sjbh">数据变化，视图改变</button></p> <!-- .未使用number属性用法的结果 --> <p>未使用number属性用法的结果</p> <input type="text" v-model="n1"> + <input type="text" v-model="n2">= {{ n1 + n2 }} <!-- .使用number属性用法的结果 --> <p>使用number属性用法的结果</p> <input type="text" v-model.number="n3"> + <input type="text" v-model.number="n4"> = {{ n3 + n4 }} </div> </template> <script setup> import { ref } from 'vue' const username = ref('zhangsan') const sjbh=()=>{ username.value='李四' } // .number属性用法 const n1 = ref(1) const n2 = ref(2) const n3 = ref(1) const n4 = ref(2) </script>运行结果
五、条件渲染指令
1、v-if
2. v-show
<template> <p v-if="flag">通过v-if控制的元素</p> <p v-show="flag">通过v-show控制的元素</p> <button @click="flag = !flag">显示/隐藏</button> </template> <script setup> import { ref } from 'vue' const flag = ref(true) </script>运行结果
六、列表渲染指令
5.1 演示使用v-for根据一维数组渲染列表
<template> <div v-for="(item, index) in list" :key="index"> 索引是：{{ index }} --- 元素的内容是：{{ item }} </div> </template> <script setup> import { ref,onMounted,reactive } from 'vue' // reactive 声明普通数组 / 基础类型变量是错误用法，会导致数据无法响应式更新。推荐用ref const list = ref(['HTML', 'CSS', 'JavaScript']) // 组件挂载后修改数组 onMounted(() => { // 正确：ref 声明的数组直接修改，页面会自动更新 list.value.push('Vue') }) </script>运行结果
5.2 演示使用v-for根据对象数组渲染列表
<template> <div v-for="item in list" :key="item.id"> id是：{{ item.id }} --- 元素的内容是：{{ item.message }} </div> </template> <script setup> import { reactive } from 'vue' const list = reactive([ { id: 1, message: '梅', }, { id: 2, message: '兰', }, { id: 3, message: '竹', }, { id: 4, message: '菊', } ]) </script>运行结果
5.3演示使用v-for根据对象渲染列表
<template> <div v-for="(value, name) in user" :key="name"> 属性名是：{{ name }} --- 属性值是：{{ value }} </div> </template> <script setup> import { reactive } from 'vue' const user = reactive({ id: 11, name: '小明', gender: '男' }) </script>运行结果