首页 > 其他分享 >Vue-模板语法

Vue-模板语法

时间：2023-09-15 22:12:51浏览次数：44  
标签：style Vue img 标签 语法 点击 字符串 true 模板

一、模板语法

 插值语法

最后都渲染成了字符串

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>渲染字符串-姓名：{{name}}</p>
    <p>渲染字符串-年龄：{{age}}</p>
    <p>渲染数组-数组：{{list1}}</p>
    <p>渲染数组-数组-按位置取值：{{list1[1]}}</p>
    <p>渲染对象-对象：{{obj1}}</p>
    <p>渲染对象-对象-按key取值:{{obj1.name}}</p>
    <p>渲染对象-对象-按key取值:{{obj1['age']}}</p>
    <p>渲染标签字符串(处理了xss攻击)：{{link1}}</p>
    <p>三目运算符(运算完的结果被渲染)：{{10 > 9 ? 1 : 2}}</p>
    <p>三目运算符：{{list1.length>2?"大于2":"小于2"}}</p>
    <p>简单表达式：{{1+23}}</p>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'hh',//字符串
            age: 19,//数值
            list1: [1, 2, 3, 4],//数组
            obj1: {name: 'hh', age: 19},//对象
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        },
    })
    //结果会在Console台打印
    var list1=[1,2,3,4]
    var res=list1.length>2?'大于1':'小于1'
    console.log(res)
</script>
</html>

结果：

 

 结果：

二、指令

文本指令

Vue的指令系统，放在标签，以v- 开头的，每个指令都有特殊的用途

v-text：把字符串内容渲染到标签内部

v-html：把字符串内容渲染到标签内部，但如果是标签字符串，会被渲染出标签

v-show：控制标签显示与否：通过style的display是否等于none控制，在html中还存在这个标签，布尔值为true，则显示，为false就不显示

v-if：控制标签显示与否：通过dom操作做的，这个标签从dom中删除了，布尔值为true，则显示，为false就不显示

注:v-show 和v-if的区别：

  • v-show：标签还在，只是不显示了（display: none）
  • v-if：直接操作DOM，删除/插入 标签

v-text：标签内容显示js变量对应的值　　v-html：让HTML渲染成页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id ='app'>
<h3>v-text:会把字符串渲染到标签内部</h3>
    <p v-text="name"></p>
    <p v-text="link1"></p>
<h3>v-html：会把字符串渲染到标签内部，但是如果是标签字符串，会被渲染成标签</h3>
    <p v-html="name"></p>
    <p v-html="link1"></p>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            name:'hh',
            link1:'<a href="https://www.baidu.com">百度一下 点我知道</a>'
        }
    })

</script>
</html>

结果：

 

v-show：显示/隐藏内容　　v-if：显示/删除内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id ='app'>
<h3>v-show:通过控制style的display是否等于none来控制标签的显示与否，标签还在html中</h3>
    <div>
        <span v-show="isShow">我是：isShow=true</span>
    </div>
<h3>v-if:通过dom操作来控制标签的显示与否</h3>
    <span v-if="isShow1">我是：isShow1=true</span>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            name:'hh',
            link1:'<a href="https://www.baidu.com">百度一下 点我知道</a>',
            isShow:true,
            isShow1:true,
        }
    })
</script>
</html>

 

当开始设置isShow=true，isShow1=true时：

 当在Console台将isShow改为false，isShow1改为false时：

 结果：

 再次都改成true时：

 结果：v-show控制的标签，style中的没有写display：none

 案例：通过点击按钮来控制显示和小事

 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id='app'>
    <div>
        <button v-on:click="handleShow">点我</button>
        <span v-if="isCreated">isCreated</span>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz',
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
            isShow: true,
            isShow2: true,
            isCreated: false
        },
        methods: {
            handleShow() {
                this.isCreated = !this.isCreated

            }
        }
    })

</script>
</html>

结果：

当点击按钮时：

 2. 事件指令

用 v-on 绑定事件后，只要触发事件，就会执行函数

v-on：点击事件，双击事件，滑动事件=‘函数’，用的最多的就是click事件，单击事件

v-on：click=‘函数’ ---》放在标签上，点击标签，就会触发函数执行，函数必须写在methods中

v-on：click可以简写为 ---》@click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="handleClick">点我</button>
    <br>
    <button @click="handleClick1">点我：如果不传，默认第一个参数是 ：点击事件对象：PointerEvent</button>
    <br>
    <button @click="handleClick1(1)">点我:传一个参数，只要传了参数，点击事件对象就不传入了</button>
    <br>
    <button @click="handleClick1(1,2)">点我:传两个参数，正常使用</button>
    <br>
    <button @click="handleClick1(1,2,3)">点我:传三个参数，只用前两个</button>
    <br>
    <button v-on:click="handleClick1(1,$event)">点我，传参数,第一个是数字，第二个是点击事件</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            // handleClick: function () {
            //     alert('123')
            // }
            // es6 语法
            handleClick() {
                alert('123')
            },
            handleClick1(a,b) {
                console.log(a,b)
            }
        }
    })
</script>
</html>

结果：

 3. 属性指令

每个标签都会有属性，动态替换属性的值，就要用到属性指令

v-bind：属性=‘变量’ ---》针对所有标签的所有属性

v-bind：属性=‘变量’ 可以简写为----》：属性=‘变量’

eg：

　　：id =‘变量’

　　：name=‘变量’

 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
    <style>
        .red {
            color: rgba(248, 126, 126, 0.7);
        }

        .purple {
            color: rgba(150, 150, 243, 0.7);
        }
    </style>
</head>
<body>
<div id="app">
    <h4>点击显示图片</h4>
    <button @click="handleClick">点我显示帅哥</button>
    <br>
    <button @click="handleClick1">点我帅哥变大</button>
    <br>
    <img :src="img_url" :height="height" :width="width">
    <h2>class属性</h2>

    <button @click="handleChangeClass">点我变class</button>
    <div :class="isActivate?'red':'purple'">
        <h3>我是一个div</h3>
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            img_url: '',
            height: '200px',
            width: '200px',
            isActivate: true
        },
        methods: {
            // 点击显示帅哥
            handleClick() {
                this.img_url = './img/2.png'
            },
            // 点击帅哥变大
            handleClick1() {
                this.height = '400px'
                this.width = '400px'
            },
            // 点击切换颜色属性
            handleChangeClass() {
                this.isActivate = !this.isActivate
            }
        }
    })
</script>
</html>

 

结果：

当点击按钮时：

点击换色：

案例：切换图片，点击就修改src属性

 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
    <style>
        .red {
            color: rgba(248, 126, 126, 0.7);
        }

        .purple {
            color: rgba(150, 150, 243, 0.7);
        }
    </style>
</head>
<body>
<div id="app">
    <h1>点击按钮，切换图片</h1>
    <button @click="handleChange">点我换帅哥</button>
    <img :src="img_url2" height="400px" width="400px">
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // 切换图片
            img_url2:'./img/1.png',
            img_list:['./img/1.png','./img/2.png','./img/3.png','./img/4.png','./img/5.png',]
        },
        methods: {
            // 点击切换图片
            handleChange(){
                // Math.random()   0--1 之间的小数
                // this.img_list.length 数组长度，当Math.random()为0.5时，img_list.length=5时，长度为5
                this.img_url2=this.img_list[Math.floor(Math.random()*this.img_list.length)]
            }
        }
    })
</script>
</html>

结果，当点击按钮时：

 

 

4. style和class

数据的绑定

语法：:属性名='js变量/js语法'

  • :class='js变量、字符串、js数组'

class：三目运算符、数组、对象{red: true}

  • :style='js变量、字符串、js数组'

style：三目运算符、数组[{backgreound: 'red'},]、对象{background: 'red'}

 style的绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
    <style>
        .sizer {
            font-size: 30px;
        }
        .background {
            background-color: rgba(150, 150, 243, 0.7);
        }
    </style>
</head>
<body>
<div id="app">
    <h3>style绑定字符串、数组、对象</h3>
    <div :style="style_obj">
        <button @click="handleXi">点击字体变细</button>
        <button @click="handleFont">点击字体变小</button>
        <p>我是div内的p</p>
    </div>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            // style是字符串类型
            style_str:'background: lightblue;font-size:30px;font-weight:bold',
            // style是数组类型
            style_list:[{'background':'lightblue'},{'font-size':'30px'},{fontWeight: 'bold'}],
            // style是对象类型(建议用对象类型，方便修改)
             style_obj: {'background': 'lightblue', fontSize: '30px', 'font-weight': 'bold'},
        },
        methods:{
            // 点击字体变细
            handleXi(){
                // 字符串
                // this.style_str='background: lightblue;font-size:30px;'
                this.style_list.pop()
            },
            //点击字体变小
            handleFont(){
                this.style_obj.fontSize='10px'
            }
        }
    })
</script>
</html>

结果：

 点击字体变细：

 点击字体变小：

 class的绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
    <style>
        .size {
            font-size: 30px;
        }
        .background {
            background-color: rgba(150, 150, 243, 0.7);
        }
    </style>
</head>
<body>
<div id="app">
    <h3>class绑定字符串、数组、对象</h3>
    <div :class="class_list">
        <button @click="handleClick">点击去除背景</button>
        <button @click="handleClick1">点击字体变小</button>
        <button @click="handleClick2">点字体变大</button>
        <p>我是div的span</p>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // 去除背景
            handleClick() {
                //字符串
                // this.class_str = 'size'
                // pop 删除最后一个元素
                this.class_list.pop()
            },
            // 点击字体变小
            handleClick1() {
                //删除size:删除数组第一个元素用shift
                this.class_list.shift()
            },
            //点击字体变大
            handleClick2() {
                // push :往数组里加值
                this.class_list.push('size')
            }
        }
    })
</script>
</html>

 

结果：

 点击去除背景：

 点击字体变小：

 点击字体变大：

 

标签：style,Vue,img,标签,语法,点击,字符串,true,模板
From： https://www.cnblogs.com/Lucky-Hua/p/17705461.html

相关文章

  • Vue项目报TypeError: Cannot read properties of undefined (reading '_wrapper')
    前情最近在做一个营销活动的时候，我选择了Vue技术栈来开发。坑位项目看似一切都正常，但当我在绑定的js事件中去修改当前组件的data上的值时会报错：TypeError:Cannotreadpropertiesofundefined(reading'_wrapper')。报错信息指向vue.runtime.esm.js，不太好定位，一度怀疑是不......
  • 【JavaScript保姆级教程】JavaScript的介绍和简单语法
    @TOC前言JavaScript是一种广泛使用的脚本语言，为网页添加交互性和动态功能提供了强大的支持。在本文中，我们将深入了解JavaScript的基本概念和用法，包括它在HTML中的书写位置、注释和结束符的使用，以及一种常用的函数——alert语句。一、javascript语言简介JavaScript是一种轻量级的解......
  • Vue源码学习(五):<templete>渲染第四步,生成虚拟dom并将其转换为真实dom
    好家伙， 前情提要：在上一篇我们已经成功将ast语法树转换为渲染函数 现在我们继续 1.项目目录代码已开源https://github.com/Fattiger4399/analytic-vue.git手动调试一遍,胜过我解释给你听一万遍新增文件：vnode/index.js  vnode/patch.js  lifecycle.js 2.虚......
  • Python基础 - 索引器，切片语法
    索引器语法：obj[key]a)一般key为int和str比较常见，但是Python下的索引器的key也可以是float,tuple,list,dict等任意对象。b)索引器会由解释器帮我们转换成对__getitem__函数的调用。 classMyTest():def__getitem__(self,key):print(type(key))......
  • vue页面集成海康威视web视频播放插件
    参考大神链接：https://www.jianshu.com/p/71d97362fdd81、进入海康威视官网下载web视频插件下载插件开发包：https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10 官方教程：https://open.hikvision.com/docs/docId?productId=612781c8ec4acb28e0e1c0c3&versi......
  • springboot+vue导出本地可执行文件
    1、前端页面增加下载链接<ahref="http://localhost:80/system/download"download="xxx.exe">下载地址</a>2、后端读取文件下载//下载文件@GetMapping("/system/download")publicvoiddownload(HttpServletResponseresponse){S......
  • vue大转盘旋转效果-停在随机定位的奖品处
    代码有点乱,给予vue写的,奖品可以自定义数量抽奖也是随机生成了奖品的下标,然后停在该下标的位置里面有个大转盘的背景图,自己随便找个圆形图片放上去就行了<!--这个案例大概实现了停止在初始位置,误差在±10度左右增加了奖品分布--><template><divclass="hello"><div......
  • vue3.3.x setup 新实验性特性 defineModel 定义多个属性
    由于有些业务组件需要定义多个响应式props，类似这种(比较懒，没上ts)，在vue3.3.x以前，如果不用三方库，代码会变得很繁琐<scriptsetup> constprops=defineProps({ modelValue:{ type:Object, default:()=>({}) }, fields:{ type:Object, default:()=>(......
  • vue前后端分离项目中，对于空字符串转可空类型出错的解决办法
    环境：netcore 6.0+序列化采用自带的System.Text.Json工具使用vue做前后端分离时，我们提交的对象中，可能有些字段是为空字符串，但是对应接口要求是int?，decimal?datetime?等类型。那么在序列化时，就会报错。因为空字符串无法直接反序列化为null 所以我们需要自定义一个转换规......
  • 原生HTML单页面使用vue框架
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=devi......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99