<template> <homeHeader :class='isclicked1' vuale="朋哟"></homeHeader> <homeHeader :class='isclicked2' vuale="哼哼"></homeHeader> <van-nav-bar> <template #right> <van-icon name="search" size="18" /> </template> </van-nav-bar>  <div>   <van-tabs v-model:active="active"> <van-tab title="综合"> <tab></tab> <SZ_Boss_home></SZ_Boss_home> </van-tab> <van-tab title="web"> <tab></tab> <SZ_Boss_home></SZ_Boss_home></van-tab> </van-tabs> </div> </template> <script> /* import tabHome from '../components/tab.vue' / import SZ_Boss_home from './SZ_Boss_home.vue' import homeHeader from '../components/homeHeader.vue' import tab from '../components/tab.vue' export default { components: { homeHeader, / tabHome */ SZ_Boss_home, tab }, data() { return { } }, methods: { } } </script> <style scoped> .top_nav { display: flex; position: absolute; top: 0; left: 0; z-index: 999; } .van-nav-bar { background-image: linear-gradient(to right, rgba(86, 238, 233, 0.24), rgba(230, 144, 168, 0.33)); color: rgb(255, 255, 255); border-bottom: 1px rgba(255, 255, 255, 0.45); } .van-tabsnav .van-tabsnav--line { top: 300px; height: 0; } .van-tab { float: right; background-color: rgb(80, 160, 171); } </style>该文件调用了<template> <div class="top_nav" > <input type="button" :class="{'my-button': true, 'active': isClicked1}" value="实习" @click="toggleButton1"> <input type="button" :class="{'my-button': true, 'active': isClicked2}" value="兼职" @click="toggleButton2"> </div> </template> <script> export default { name:'homeHeader', data() { return { isClicked1: true, isClicked2: false, } }, methods: { toggleButton1() { if (this.isClicked1) { return; } this.isClicked1 = true; this.isClicked2 = false; this.$emit('reset-buttons'); }, toggleButton2() { if (this.isClicked2) { return; } this.isClicked1 = false; this.isClicked2 = true; this.$emit('reset-buttons'); } }, props:['tit'] } </script> <style scoped> .my-button { border: none; border-radius: 4px; background-color: #f0f0f000; transition: all 0.2s ease-in-out; cursor: pointer; color: rgb(154, 154, 154); font-size: 16px; } .active { background-color: rgba(51, 51, 51, 0); color: rgb(0, 0, 0); font-size: 26px; } .top_nav input{ float: left; } </style>该子组件，但是为什么value得值不能改变

时间: 2024-04-28 19:23:36 浏览: 170

TXT

javascript中<script type="text/javascript">的用法与意思

### JavaScript中的`<script type="text/javascript">`标签详解 #### 标签含义与作用在Web开发中，`<script>`标签是HTML文档中用于嵌入或引用JavaScript代码的关键元素之一。它允许开发者直接在HTML文档内部编写脚本代码或者通过`src`属性链接到外部JavaScript文件。在早期的HTML版本中，`<script>`标签通常会包含一个`type`属性来指定脚本的类型，如`type="text/javascript"`。 #### `type="text/javascript"`的含义 `type="text/javascript"`这一属性值用来表明该脚本是用JavaScript语言编写的。随着HTML5的发展，`type`属性默认值已经被设置为`application/javascript`，因此现代浏览器中不再需要显式地指定`type="text/javascript"`。然而，在某些旧版的HTML文档或者为了保持兼容性时，仍然会见到这样的写法。 #### `<script>`标签的基本用法 1. **内联脚本**：可以直接在`<script>`标签内部编写JavaScript代码。 ```html <script type="text/javascript"> console.log("Hello, World!"); </script> ``` 2. **外部脚本**：可以通过`src`属性引用外部JavaScript文件。 ```html <script src="path/to/script.js" type="text/javascript"></script> ``` 3. **自定义事件触发**：可以使用`<script>`标签配合DOM事件来动态加载脚本。 ```html <button onclick="alert('Button clicked!')">Click me</button> ``` 4. **Google Analytics示例**： ```html <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-556982-2"; urchinTracker(); </script> ``` 上面这段代码展示了如何使用`<script>`标签来加载Google Analytics（一种流行的网站统计工具）的跟踪代码。`_uacct`变量用于存储追踪ID，`urchinTracker()`函数则负责初始化跟踪功能。 #### 重要属性介绍 - **`async`属性**：表示脚本是否异步加载，默认为同步加载。如果设置为`async`，则脚本会在下载的同时继续执行其他操作，不会阻塞页面渲染。 ```html <script src="path/to/script.js" type="text/javascript" async></script> ``` - **`defer`属性**：同样用于异步加载脚本，但保证脚本按顺序执行。 ```html <script src="path/to/script.js" type="text/javascript" defer></script> ``` - **`crossorigin`属性**：用于控制跨源资源共享(CORS)策略，可以设置为`anonymous`或`use-credentials`。 ```html <script src="path/to/script.js" type="text/javascript" crossorigin="anonymous"></script> ``` #### 总结 `<script type="text/javascript">`标签及其相关属性是网页开发中不可或缺的一部分，它们使得开发者能够轻松地将JavaScript代码嵌入到HTML文档中，实现各种动态效果和交互功能。了解这些基础知识对于掌握前端开发至关重要。随着技术的发展，虽然`type="text/javascript"`这一属性已经不再是必须的，但在实际项目中仍然可以看到它的身影，特别是为了确保与老版本浏览器的兼容性。

根据你提供的代码，我注意到 `<homeHeader>` 组件中的 input 标签的 value 属性是通过 props 传递进来的，而且在子组件中没有对它进行修改的方法，所以它的值不能改变。如果你想要修改这个值，可以考虑在父组件中将这个值传递给子组件的 data 中，然后通过子组件的 methods 方法来修改它。这样就可以实现动态修改 value 的值了。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通