template的用法，适用场合，为什么会出bug，怎么改

news/2024/7/9 23:54:17 标签: javascript, vue 
javascript"><template id="tem">
    <div id="div1">我是template</div>
    <div>我是template</div>
</template>
<script type="text/javascript"></script>
<script>
    let o = document.getElementById("tem");
    console.log(o.content.nodeName);//#document-fragment
    console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div]。得到一个类数组
    console.log(o.content.getElementById("div1"));//<div id="div1">我是template</div>
    console.log(o.innerHTML);//'<div id="div1">我是template</div><div>我是template</div>'
</script>


javascript">Running] node "/Users/ivyone/122.html"
/Users/ivyone/122.html:1
<template id="tem">
^

SyntaxError: Unexpected token '<'
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47

[Done] exited with code=1 in 0.055 seconds


javascript"><div id="app">
    <!--此处的template标签中的内容显示并且在dom中不存在template标签-->
    <!--当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template",这是因为template标签天生不可见-->
<template><div>我是template</div></template>
<abc>我是自定义表现abc</abc>
    <template>
        <div>我是template</div>
        <div>我是template</div>
    </template>
<!--此处的template标签中的内容在页面中不显示，但是在dom结构存在该标签及内部结构-->
<template id="tem">
    <div id="div1">我是template</div>
    <div>我是template</div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return
        }
    }).mount('#app')
</script>

template里的内容在浏览器中不显示
那为什么有的template的内容显示呢，因为是v-if、v-for等内容。

所以并不是所有的模板都是模板吗？只有遇到这几个关键词了才有模板吗？
这就是所谓的模板语法吗？
不需要模板的时候，就还是div走天下吗

为什么template内的内容要不显示呢？这个标签搞个不显示的有什么意义呢

javascript"><div id="app">
    <template v-if="true">
    <!--此时template标签中的内容显示在页面上，但是看dom结构没有template标签-->
        <div>我是template</div>
        <div>我是template</div>
    </template>
    <div v-if="true">
    <!--此时页面上显示div标签中的内容，并且看dom结构存在最外面的div标签-->
        <div>我是template</div>
        <div>我是template</div>
    </div>
    <!--此处会输出6个‘我是template’并且dom结构中不存在template标签-->
    <template v-for="a in 3">
        <div>我是template</div>
        <div>我是template</div>
    </template>

</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return
        }
    }).mount('#app')
</script>

自己写的错的：

javascript"><div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: ''
        }
    }).mount('#app')
</script>

一会儿改一下。

javascript"><div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "HelloWorld",
                flag: ""
        }
    }
    }).mount('#app')
</script>

改了一下，还不行。

javascript"><div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "HelloWorld",
                flag: true
        }
    }
    }).mount('#app')
</script>

又改了一下，把frag改成true，怎么还啥也没有？
那写这写msg有啥意义？

javascript"><div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}</div>
    <div v-else>111</div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "HelloWorld",
                flag: true
        }
    }
    }).mount('#app')
</script>

在下面声明了template，注册了template id，终于出来了

javascript"><div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}</div>
    <div v-else>111</div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "HelloWorld",
                flag: true
        }
    },
        template: "#first"
    }).mount('#app')
</script>

frag是有啥用的？

如果是false，就是111

javascript"><div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}</div>
    <div v-else>111</div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "HelloWorld",
                flag: false
        }
    },
        template: "#first"
    }).mount('#app')
</script>

true，是helloworld。

又一个，有错

javascript"><div id="app">
    <template v-if="!isLogin">
        <form>
            <p>username: <input type="text"></p>
            <p>password: <input type="password"></p>
        </form>
    </template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                isLogin:false
        }
    },
        template: "#first"
    }).mount('#app')
</script>

为什么template first这行不要，因为前面没有template id吗？

javascript"><div id="app">
    <template v-if="!isLogin">
        <form>
            <p>username: <input type="text"></p>
            <p>password: <input type="password"></p>
        </form>
    </template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                isLogin:false
        }
    }
    }).mount('#app')
</script>

以上就有了。
很漂亮。因为是false，所以有了，把false改成true，就没有了。console里的内容也没有了。
再改一下。把！isLogin的！去掉，试试。
果然有了
同时把true改成false，果然又没有了。

那为什么要用!，是不是多此一举，什么场景下会需要用到 非？

isLogin是变量吗？还是逻辑啥，是与非的两个选择。

是一个属性吧？具有是与非的属性？怎么理解。是内置的吗，是特殊的吗，是与非是值吗？


http://www.niftyadmin.cn/n/957504.html

相关文章

Python reversed()函数

Python reversed()函数

描述&#xff1a; reversed()函数是python中极其常用的函数&#xff08;我上回面试还被问到了&#xff09;。reversed()函数的作用是返回一个反转的迭代器&#xff08;元组、列表、字符串、range&#xff09;。 语法&#xff1a; reversed(seq) 参数介绍&#xff1a; seq…
阅读更多...
return的值到底是一个什么值？是事先的值，还是等于算出来的结果的值，这里算出来的是优秀还是不及格，但返回的值却是分数

return的值到底是一个什么值？是事先的值，还是等于算出来的结果的值，这里算出来的是优秀还是不及格，但返回的值却是分数

<div id"app"><span v-if"score>85">优秀</span><span v-else-if"score>75">良好</span><span v-else-if"score>60">及格</span><span v-else>不及格</span> </di…
阅读更多...
Pytorch probability distributions

Pytorch probability distributions

1.OneHotCategorical torch.distributions.one_hot_categorical.OneHotCategorical(probsNone, logitsNone, validate_argsNone) 根据给定的概率probs, 创建一个 one-hot 的类别分布. m OneHotCategorical(torch.tensor([ 0.1, 0.0, 0.9, 0.0 ])) m.sample() # equal proba…
阅读更多...
@Autowired自动注入为null的原因

@Autowired自动注入为null的原因

原因 在多线程时使用Autowired总是获取不到bean 原因是&#xff1a;new thread不在spring容器中&#xff0c;也就无法获得spring中的bean对象。 解决 代码实现&#xff1a; package com.test.configs;import org.springframework.beans.BeansException; import org.springf…
阅读更多...
聚簇索引和非聚簇索

聚簇索引和非聚簇索

聚簇索引和非聚簇索引 聚簇索引&#xff1a;将数据存储与索引放到了一块&#xff0c;索引结构的叶子节点保存了行数据 非聚簇索引&#xff1a;将数据与索引分开存储&#xff0c;索引结构的叶子节点指向了数据对应的位置 在聚簇索引之上创建的索引称之为辅助索引&#xff0c;…
阅读更多...
使用prop向子组件传递数据：

使用prop向子组件传递数据：

组件内部如何传递数据&#xff0c; 无所谓哪个是父组件&#xff0c;哪个是子组件&#xff1f;一说&#xff0c;就是组件内部传数据 <div id"app"><post-item post-title"Java 无难事"></post-item> </div> <script src"h…
阅读更多...
tensorboard 生成的网址不能正常打开访问

tensorboard 生成的网址不能正常打开访问

最近学习 TensorFlow 中可视化助手 Tensorboard&#xff0c;但是一切设置好后&#xff0c;网址总是打不开&#xff0c;显示拒绝此连接。 本篇文章将帮助解决这个问题。 首先&#xff0c;应该确保自己的电脑名称为英文&#xff0c;不能出现中文&#xff0c;否则生成的日志文件…
阅读更多...
redis cluster的批处理中ask重定向解决方案

redis cluster的批处理中ask重定向解决方案

分别使用mget和pipline做批处理 1.使用mget批量获取&#xff0c;如果存在重定向问题&#xff0c;会抛出异常。 Testpublic void testMget(){JedisCluster jedis RedisClusterUtil.getJedis();List<String> results null;results jedis.mget("user:{info}:id"…
阅读更多...
最新文章

Copyright @ 2022~2023