<template>
<div style="margin: 0 auto; width: 50%">
<h1>笔记本h1>
<div class="div">
<input v-model="Selected" placeholder="请输入数字" style="width: 80px;" type="number">
<a @click="selected($event)">
<button>查询button>
a>
div>
<table>
<tr>
<td>
<input v-model="Input" placeholder="请输入要插入的内容" type="text">
<button @click="add($event)">添加button>
td>
tr>
table>
<div class="div">已添加的内容div>
<table id="tb">
<tr v-for="(item,index) in array" :key="index">
<td id="td1">
<div :class="['div', index + 1]">
<div id="li">{{ index + 1 }}.div>
{{ item.value }}
<button style="float: right" @click="modify(item.value, index)">修改button>
<button style="float: right" @click="del(index)">删除button>
<div>插入时间: {{ item.time }}div>
div>
td>
tr>
table>
<div class="div"><input v-model="count" placeholder="共插入了0条数据" readonly type="text">div>
div>
template>
<script setup>
import { reactive, ref } from 'vue'
// reactive只会修改 最新的数据,不会更新原来的数据,ref则会全局更新数据
const array = reactive([])
const Input = ref()
const count = ref()
const Selected = ref()
const add = (e) => {
const text = Input.value
if (text === '') {
alert('插入内容为空,请重新插入')
} else {
array.push({ value: text, time: getTime() })
// reactive只能通过对象的形式创建对象
Input.value = ''
count.value = '共插入了' + array.length + '条数据'
}
e.target.focus()
}
function getTime () {
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minutes = date.getMinutes()
const seconds = date.getSeconds()
return year + '年' + month + '月' + day + '日 ' + hour + '时' + minutes + '分' + seconds + '秒'
}
const del = (index) => {
array.splice(index, 1)
count.value = '共插入了' + array.length + '条数据 '
}
const modify = (text, index) => {
if (Input.value === '') {
Input.value = text
del(index)
} else {
alert('不可同时修改多处内容')
}
}
const selected = (e) => {
const bol = array[Selected.value]
if (bol === undefined) {
alert('查询失败,输入错误')
return
}
e.target.href = '.div' + Selected.value
}
script>
<style>
table {
margin: 0 auto 20px;
}
td {
display: block;
margin: 10px;
}
#tb td {
text-align: center;
border-bottom: 1px solid black;
}
#li {
float: left;
}
input {
border: 0;
text-align: center;
}
.div {
margin: 20px;
}
body {
font-size: 20px;
}
style>
查询按钮点击后跳转到指定内容处,谁能帮我设计下
可以为要跳转的内容添加一个id，然后在点击查询按钮时，利用JavaScript的scrollIntoView()方法将页面滚动到该id所在的位置。
具体实现可以在查询按钮的点击事件中添加如下代码：
const selected = (e) => {
const index = Selected.value - 1
const element = document.getElementById(`div${index}`)
if (element) {
element.scrollIntoView()
} else {
alert('查询失败，输入错误')
}
}
同时，还需要在模板中为要跳转的内容添加id，如下所示：
<tr v-for="(item,index) in array" :key="index">
<td id="td1">
<div :class="['div', 'div' + index]" :id="'div' + index">
<div id="li">{{ index + 1 }}.</div>
{{ item.value }}
<button style="float: right" @click="modify(item.value, index)">修改</button>
<button style="float: right" @click="del(index)">删除</button>
<div>插入时间: {{ item.time }}</div>
</div>
</td>
</tr>
注意，需要将查询的索引值减1，因为索引是从0开始计数的。
不知道你这个问题是否已经解决, 如果还没有解决的话:简单来讲，分为两步，1.set，2.get.(双向绑定的核心)
那么第一步set:
通过el节点获取它的子节点input。监听input输入，将input输入的值传给页面绑定pageValue。 这里就要用到虚拟节点vnode和指令属性binding来获取:vnode.context[binding.expression]
第二步get:
通过钩子函数update:function(){} 实时监听当前指令绑定的页面的值变化。然后更新到子组件。
思路有了，接下来就是代码：
export default {
components:{
zidingyizujian,
},
data(){
return{
pageValue:'这是页面的v-model'
}
},
created(){
},
directives: {
'comModel': {
// 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
bind:function(el,binding,vnode,oldVnode){
},
//被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
inserted: function (el,binding,vnode,oldVnode) {
console.log(el,'el')
console.log(binding,'binding')
console.log(vnode,'vnode')
console.log(oldVnode,'oldVnode')
let input = el.getElementsByTagName('input')[0];
input.oninput = e => {
let value = e.target.value;
vnode.context[binding.expression] = value;
}
},
//所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
//但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
update:function(el,binding,vnode,oldVnode){
let input = el.getElementsByTagName('input')[0];
input.value = binding.value;
},
//指令所在组件的 VNode 及其子 VNode 全部更新后调用。
componentUpdated:function(){
},
//只调用一次，指令与元素解绑时调用。
unbind:function(){
}
}
}
}