条件渲染及v-bind

news/2024/7/10 3:01:46 标签: vue

vuev_1">vue中常用的v-指令演示

v-text:元素的textContent属性,必须是双标签跟{{}}效果是一样的使用较少

v-html:元素的innerHTML

v-if :判断是否插入这个元素,相当于对元素的销毁和创建

v-else-if

v-else

v-show隐藏元素如果确定要隐藏，会给元素的style加上display:none。是基于css样式的切换

v-if和v-show的区别(官网解释)

v-if是“真正"的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if也是惰性的:如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好﹔如果在运行时条件很少改变，则使用v-if较好。

条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>条件渲染</title> 
</head>
<body>
    <div id="app">
        <div v-if = "isShow">
            显示
        </div>
        <div v-else>
            隐藏正常
        </div>
        <h3 v-show='show'>正常显示</h3>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow:Math.random() > 0.5,
            show:true
            }
        })        
    </script>
</body>
</html>

image-20201214215047828

将show的值改为false

image-20201214215136621

指令之v-bind

v-bind使用

image-20201214222109676

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title> 
</head>
<body>
    <div id="app">
        <a href="res.url">百度</a>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                res:{
                    name:'百度',
                    url:'https://www.baidu.com'
                }
            }
        })        
    </script>
</body>
</html>

image-20201214215937122

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title> 
</head>
<body>
    <div id="app">
        <a v-bind:href="res.url" v-bind:title='res.title'>百度</a>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                res:{
                    name:'百度',
                    url:'https://www.baidu.com',
                    title:'百度一下'
                }
            }
        })        
    </script>
</body>
</html>

image-20201214220022600

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title> 
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <a v-bind:href="res.url" v-bind:title='res.title'>百度</a>
        <h3 v-bind:class="{active:isActive}">v-bind的用法</h3>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                res:{
                    name:'百度',
                    url:'https://www.baidu.com',
                    title:'百度一下',

                },
                isActive:true
            }
        })        
    </script>
</body>
</html>

image-20201214220541902

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title> 
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <a v-bind:href="res.url" v-bind:title='res.title'>百度</a>
        <h3 v-bind:class="{active:isActive}">v-bind的用法</h3>
        <h4 :style='{color:isColor,fontSize:fontSize+" px"}'>hello bind</h4>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                res:{
                    name:'百度',
                    url:'https://www.baidu.com',
                    title:'百度一下',
                },
                isActive:true,
                isColor:'green',
                fontSize:30
            }
        })        
    </script>
</body>
</html>

image-20201214220951110


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

相关文章

go get使用goproxy.cn仍然报错connectex: A connection attempt failed的解决方法

go get使用goproxy.cn仍然报错connectex: A connection attempt failed的解决方法

执行 go get -v golang.org/x/tools/gopls 报错&#xff1a; package golang.org/x/tools/gopls: unrecognized import path "golang.org/x/tools/gopls": https fetch: Get "https://golang.org/x/tools/gopls?go-get1": dial tcp 216.239.37.1:443: c…
阅读更多...
在LaTeX中优雅地插入Wolfram Mathematica代码

在LaTeX中优雅地插入Wolfram Mathematica代码

本文同步在如何高效地联合使用 Mathematica 和 LaTeX&#xff1f;。 插入一般的代码使用listings包或minted包即可&#xff0c;但是Mathematica代码在前端中的显示是其实际的文本代码的再渲染&#xff0c;如果直接插入会插入许多多余的代码&#xff0c;即使手动选择其中的公式…
阅读更多...
IEEEtrans LaTeX模板插入双栏跨栏长公式的方法

IEEEtrans LaTeX模板插入双栏跨栏长公式的方法

方法一&#xff1a;当作figure。根据其官方文档How to Use the IEEEtran LATEX Class的第X节"FLOATING STRUCTURES"的D. Double Column Floats&#xff0c;在导言部分&#xff08;也就是\begin{document}之前&#xff09;加上 \newcounter{MYtempeqncnt} 然后在要插…
阅读更多...
v-on的事件绑定

v-on的事件绑定

v-on的事件绑定 事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点&#xff0c;但更好的方式是&#xff1a;方法只有纯粹的数据逻辑&#xff0c;而不是去处理 DOM 事件细节。 为了解…
阅读更多...
v-for的列表渲染

v-for的列表渲染

v-for的列表渲染 <!DOCTYPE html><html lang"en"><head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, initial-scale"><meta http-equiv"X-UA-Compatible" con…
阅读更多...
LaTeX在minted环境中插入希腊字母等Unicode字符的方法

LaTeX在minted环境中插入希腊字母等Unicode字符的方法

本文参考How do I display Unicode characters with minted?。 传统上用PDFLaTeX更复杂&#xff0c;这里不推荐。在导言区加上&#xff1a; \documentclass{article} \usepackage[LGR, T1]{fontenc} \usepackage{textcomp} \usepackage[utf8]{inputenc} \usepackage{lmoder…
阅读更多...
表单输入绑定v-model

表单输入绑定v-model

表单输入绑定v-model v-model 双向的数据绑定 双向数据流&#xff08;绑定)&#xff1a; 页面改变影响内存(js)&#xff0c;内存(js)改变影响页面 <!DOCTYPE html><html lang"en"><head><meta charset"utf-8"><meta name&qu…
阅读更多...
LaTeX在minted环境使用数学公式环境（如分式等）

LaTeX在minted环境使用数学公式环境（如分式等）

本文参考minted包官方文档v2.5 from 2017/07/19第24、26页及minted使用。 \begin{minted}[escapeinside||,mathescapetrue,framesingle,bgcolorbg,breaklines,breakanywhere,numbersleft]{mma}|$chi2[\frac{α}{2}, n - 1]$||$chi2[1 - \frac{α}{2}, n - 1]$||$\sqrt{\frac{(…
阅读更多...
最新文章

Copyright @ 2022~2023