首页 > 其他分享 >19-内置指令

19-内置指令

时间:2023-09-25 18:00:51浏览次数:49  
标签:内置 渲染 19 text 绑定 指令 动态控制 节点

目前为止,我们学过的指令:

v-bind:单向绑定解析表达式,可以简写为  :xxx

v-model:双向数据绑定

v-for:遍历数组 / 对象 / 字符串

v-on:绑定事件监听,可以简写为 @

v-if:条件渲染(动态控制节点是否存在)

v-else:条件渲染(动态控制节点是否存在)

v-show:条件渲染(动态控制节点是否展示)

 

v-text指令

作用:向其所在的节点中渲染文本内容

与插值语法的区别:v-text 会替换掉节点中的内容,{{xxx}} 则不会,更加灵活

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-text指令</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--准备好一个容器-->
        <div id="root">
            <div>{{name}}</div>
            <div v-text="name"></div>
        </div>
        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false

            new Vue({
                el:"#root",
                data(){
                    return{
                        name:"马铃薯",
                    }
                }
            })
        </script>
    </body>
</html>

 

标签:内置,渲染,19,text,绑定,指令,动态控制,节点
From: https://www.cnblogs.com/REN-Murphy/p/17728493.html

相关文章

  • Vue3 基础 – 快速上手 & 常用指令
    1.在HTML网页中使用vue3的3个基本步骤a.通过 script 标签的 src 属性,在当前网页中全局引入vue3的脚本文件:<scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script>b.创建vue3的单页面应用程序实例://2.1从Vue对象中解构出createApp函数const{cre......
  • Qt 5.12.9 + VS 2019配置并实现与三菱Q系列PLC通讯(1)软件的安装
    本人最近配置了QT5.12.9+VS2019,并实现了与三菱Q系列PLC通讯并实现数据交互的基本功能,在这个对中间遇到的一些问题和过程进行文字说明,以后大家有用到相关功能的话可以避免一些不必要的问题~需要安装的软件有三个:QT5.12.9、VS2019、MXComponetS4.19QT安装首先是对......
  • P5659 [CSP-S2019] 树上的数
    P5659[CSP-S2019]树上的数前言被队友(大爹)易giegie要求做这道题,一天一夜绞尽脑汁终于写出来了。(下了样例test1调试)然后被要求写博客虽然我觉得没啥用,但是写一下吧一些说明1.把数在删边时交换的过程看做移动,停留过的点和相关的边认为是经过这些点和边2.把一条边看做两条有......
  • QOJ 5019 整数
    QOJ传送门考虑从低位向高位dp,设\(f_{i,S}\)为考虑到从低到高第\(i\)位,当前每个数超出上界的情况为\(S\)。转移可以枚举这一位填的数:若\(a_j=0,r_j=1\),那么这一位一定不会超出上界;若\(a_j=1,r_j=0\),那么这一位一定会超出上界。否则情况和之前相同。容......
  • POI2019
    P6661Pomniejszenie还算正常的贪心P6661修改\(A\)与\(B\)高位尽可能多的数字相同,从第\(p\)位开始不同,第\(p\)位满足\(a[i]<b[i]\),把从\(p+1\)位到最后一位的数尽可能多的改成\(9\)。现在考虑位置\(p\)的选择:\(p\)满足的条件:1.从\(1\)到\(p\)中\(a[i]\)与\(b[i]\)不同(需要......
  • 219. 存在重复元素 II
    给你一个整数数组 nums 和一个整数 k ,判断数组中是否存在两个 不同的索引 i 和 j ,满足 nums[i]==nums[j] 且 abs(i-j)<=k 。如果存在,返回 true ;否则,返回 false 。示例 1:输入:nums=[1,2,3,1],k=3输出:true示例2:输入:nums=[1,0,1,1],k=1输出:true示......
  • 《看了受制了》第二十五天吗,5道题,合计119道题
    2023年9月24日今天下午,把atcoder翻译的弄成了一个ChatGpt的接口版本。优化了很多。牛客周赛13矩阵转置置题面理解就是语法,倒着输出即可。代码实现#include<iostream>#include<algorithm>#include<unordered_map>#include<cstring>#include<cstdio>#include<vect......
  • P1967 [NOIP2013 提高组] 货车运输
    P1967[NOIP2013提高组]货车运输因为可能成环,这样可能导致到达点的最小权值不一,所以用最小生成树的方法重新建图然后我是利用倍增的思想建立从i点开始,到上面点的距离ff和最小权值ww因为最小权值不好直接建立,所以不如最后统一建立最后就是寻找最近公共祖先的模板了一组hack......
  • Some Recent Thoughts Wrritten By NiuJiawen-2019141490165
    Recently,manystudentswhoarejunioryeararetakingpartininterviewsforexemptstudents.Somehaveobtainedsatisfactoryoffers,whereas,othersthinkitistoohardtogetawonderfuloffer. Andthereisnodoubtthatthelatterwillbefrustrated......
  • ciscn_2019_c_1 题解
    main函数如下:int__cdeclmain(intargc,constchar**argv,constchar**envp){intv4;//[rsp+Ch][rbp-4h]BYREFinit(argc,argv,envp);puts("EEEEEEEhhiii");puts("EEmmmmmmm......