首页 > 其他分享 >vue-2 插值语法

vue-2 插值语法

时间：2023-02-15 08:22:35浏览次数：55  
标签：vue name 插值 标签 age 语法 url var data

插值语法

mvm演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>


<div id="app">
    <p>{{name}}</p>

</div>
<script>

    var vm = new Vue({
        el: '#app', //vue管理了这个div，以后在div中可以写vue的语法了
        data: {// data中定义的变量，以后直接从vm实例直接可以拿到
            name: 'jason',
            age: 18
        }
    })
</script>

</body>
</html>

插值语法

# 插值语法可以放
-变量， 对象取值， 数组取值
 <p>名字:{{name}}</p>
 <p>年龄:{{age}}</p>
 <p>爱好:{{hobby}}----->第一个爱好：{{hobby[1]}}</p>
 <p>妻子:{{wife}}----》妻子的年龄:{{wife.age}}---{{wife['age']}}</p>
    
-简单的js语法（运算，三目运算）
<p>运算:{{10*2+3*4}}</p>
<p>三目运算符【条件?'符合了':'不符合了'】:{{10>90?'大于':'小于'}}</p>
   
-函数()

# 插值不能写在标签的属性上，只能写在标签内部

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
    <p>爱好:{{hobby}}----->第一个爱好：{{hobby[1]}}</p>
    <p>妻子:{{wife}}----》妻子的年龄:{{wife.age}}---{{wife['age']}}</p>
    <p>运算:{{10*2+3*4}}</p>
    <p>三目运算符【条件?'符合了':'不符合了'】:{{10>90?'大于':'小于'}}</p>
    <p>标签（默认不会渲染成标签）:{{a_url}}</p>
    <p>函数()</p>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz',
            age: 19,
            hobby: ['篮球', '足球', '乒乓球'],
            wife: {name: '刘亦菲', age: 38},
            // 运算
            a_url: '<a href="http://www.baidu.com">点我看美女</a>'
            // 三目运算符         三元表达式
        }
    })
</script>
</html>

文本指令

指令 释义
v-html 让HTML渲染页面
v-text 标签内容显示js变量对应的值
v-show 放1个布尔值：为真标签就显示；为假 标签就不显示
v-if 放1个布尔值：为真标签就显示；为假 标签就不显示 
-v-xx 写在标签上，任意标签
-v-xx="" ---> 原来插值语法中能写的，它都能写，不要再加{{}}

# 指令系统：vue提供的 都是 v-xx 写在标签属性上的，统称为指令，例如，a_url必须是data中定义的变量
<p v-text= 'a_url'></p>

# v-text直接把字符串内容渲染在标签内部，等同于
<p v-text"a_url"></p>
<p>{{a_url}}</p>

# v-html 把字符串的内容渲染成标签，写在标签内部
<p v-html="a_url"></p>

# v-show 等于布尔值 该标签是否显示  样式控制显示不显示：style="display:none;"
# v-if 等于布尔值，该标签是否显示 整个标签之间删除，效率低，在dom中删除标签

v-html:让HTML渲染成页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li v-html="link1"></li>
    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>
</html>

v-text:标签内容显示js变量对应的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li v-text="link1"></li>
    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
        }
    })
</script>
</html>

v-show:显示/隐藏内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <h3>案例：控件通过按钮来控制显示和小事</h3>
    <button @click="handleClick()">点我</button>
    <br>
    <div v-show="isShow">isShow</div>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        methods: {
            handleClick(){
              this.isShow = !this.isShow    // this指的是当前的vue对象
            },
        }
    })
</script>
</html>

v-if：显示/删除内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <h3>案例：控件通过按钮来控制显示和消失</h3>
    <button @click="handleClick()">点我</button>
    <br>
    <div v-if="isCreated">isCreated</div>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            isCreated:true
        },
        methods: {
            handleClick(){
              this.isCreated = !this.isCreated    // this指的是当前的vue对象
            },
        }
    })
</script>
</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">

    <h2>v-text</h2>
    <p v-text="a_url"></p>
    <h2>v-html</h2>
    <p v-html="a_url"></p>
    <h2>v-show</h2>
    <img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt="" v-show="show" width="200px" height="200px">
    <h2>v-if</h2>
    <div v-if="show_if">
        <img src="https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg" alt=""  width="200px" height="200px">
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a_url: '<a href="http://www.baidu.com">点我看美女</a>',
            show: true,
            show_if:true
        }
    })
</script>
</html>

属性指令

指令 释义
v-bind 直接写js的变量或语法（不推荐）
： 直接写js的变量或者语法（推荐） 
# 标签上的属性可以绑定变量，以后变量变化，属性的值跟着变化
-href   -src   -name    -class   -style   -height    ......

# 语法
v-bind:属性名 = '变量名'
# 可以简写成，以后都用简写
:属性名="变量名"

例如：

v-bind:href='js变量'可以缩写成：:href='js变量'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">

    <a :href="a_url">点击有惊喜</a>
    <br>
    <img :src="photo" alt="" :width="w" :height="h">
</div>


</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a_url: "http://www.baidu.com",
            photo: "https://img1.baidu.com/it/u=1570067586,2520295434&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
            h: '200px',
            w: '200px'
        }
    })
</script>
</html>

事件指令

指令 释义
v-on 触发事件（不推荐）
@ 触发事件（推荐）
@[event] 触发event事件（可以是其他任意事件） 
# 事件指令是：点击事件，双击事件，滑动事件。。。用的最多的是点击事件click
v-on:事件名='函数'
  <button @click="handleClick">庄姐合集</button>
  函数必须写在methods的配置项中
	methods:{
            'handleClick':function () {
                this.show=!this.show   //this 就是当前的vue实例
            }，
        }
    -点击button就会接触发绑定函数(handleClick)的执行
    
    # 可以简写成，以后都用简写
    @事件名='函数'

案例：点击按钮，随机切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">

    <button @click="handleClick">点击看图</button>
    <div>
        <img :src="url" alt="" width="600px"
             height="600px">
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
            url_list: [
                'https://img.lesmao.vip/k/1178/T/XIAOYU/951/951_001_dj7_3600_5400.jpg',
                'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_001_k4r_3600_5400.jpg',
                'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_004_g66_3600_5400.jpg',
                'https://img.lesmao.vip/k/1178/T/XiuRen/6165/6165_001_gwy_3600_5400.jpg',
                'https://img.lesmao.vip/k/1178/T/XIAOYU/948/948_020_xcx_3600_5400.jpg',
            ]
        },
        methods: {
            // 'handleClick': function () {
            //     // var i = Math.round(Math.random() * (this.url_list.length - 1))
            //     // this.url = this.url_list[i]
            //     // console.log(i)
            //     var _this=this
            //     setInterval(function () {
            //       console.log(_this)
            //         var i = Math.round(Math.random() * (_this.url_list.length - 1))
            //         _this.url = _this.url_list[i]
            //         console.log(i)
            //     }, 1000)
            // },

            // 简写成
            handleClick() {
                var _this = this  //
                setInterval(function () {
                    console.log(_this)
                    var i = Math.round(Math.random() * (_this.url_list.length - 1))
                    _this.url = _this.url_list[i]
                    console.log(i)
                }, 1000)
            },


        }
    })


    // es 6 的对象写法
    var hobby = ['篮球', '足球']
    var f = function (a, b) {
        console.log('匿名函数')
        console.log(a + b)
    }
    // var d={'name':"lqz",age:19,'hobby':hobby}
    // var d={'name':"lqz",age:19,hobby:hobby}
    // var d = {'name': "lqz", age: 19, hobby}   // es6 的简写形式
    // var d = {'name': "lqz", age: 19, f}   // es6 的简写形式
    var d = {'name': "lqz", age: 19, handleClick(){
      console.log('xxxxx')
      }}   // es6 的简写形式
    console.log(d)
    d.handleClick()

</script>
</html>

class和style

class: 推荐用数组

:class='变量'

变量可以是字符串，数组，对象

style:推荐用对象

:style='变量'

变量可以是字符串，数组，对象

字符串

image-20230214164655581

元组

image-20230214164936797

对象

image-20230214165527105

image-20230214165453593

style

字符串

image-20230214170016745

数组

image-20230214170135583

对象

image-20230214170711547

条件渲染

v-if=条件 放在标签上，如果条件成立，该条件成立显示，如果条件不成立，该标签就不显示

v-else-if=条件 放在标签上，如果条件成立，该条件成立显示，如果条件不成立，该标签就不显示

v-else 放在标签上，上面条件都不成立，显示这个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="score > 89 && score<100">优秀</p>
    <p v-else-if="score > 79 && score<90">良好</p>
    <p v-else-if="score > 59&& score<80">及格</p>
    <p v-else>不及格</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            score: 99,
        }
    })
</script>
</html>

列表渲染

就是用vue写for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h3>商品列表</h3>
                <button class="btn btn-primary" @click="he_click">点击显示</button>
                <table v-show="v_show" class="table-striped table-hover table">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in goods_list">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                    </tr>

                    </tbody>


                </table>

            </div>

        </div>

    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            v_show: false,
            goods_list: [
                {"id": 1, "name": "苹果", "price": 12},
                {"id": 2, "name": "栗子", "price": 13},
                {"id": 3, "name": "香蕉", "price": 14},
                {"id": 4, "name": "哈密瓜", "price": 15},
            ]
        },
        methods: {
            he_click(){
                this.v_show = !this.v_show
            }
        }
    })
</script>
</html>

image-20230214182920609

标签：vue,name,插值,标签,age,语法,url,var,data
From： https://www.cnblogs.com/zjl248/p/17121441.html

相关文章

  • vue-1
    drf回顾#1drf入门规范-前后端分离模式-前后端混合-postman-restful规范-drf：django的app#2序列化类（重点）-Serializer-字段类-字段参数-局部钩子-全局钩......
  • vue 父子组件加载顺序（生命周期钩子）
    父组件的实例化过程（包括父组件的beforeCreate和created钩子函数）父组件的模板编译和渲染过程子组件的实例化过程（包括子组件的beforeCreate和created钩子函数）子组件的模......
  • Vue - 2 插值语法与指令系统
    目录Vue-2插值语法与指令系统一、插值语法语法案例二、指令1.什么是指令系统？2.文本指令v-htmlv-textv-show：显示/隐藏任务v-if：显示/删除任务3.属性指令4.事件指令5.class......
  • 登录-退出功能（管理系统Vue）
    一、登录业务流程在登录页输入用户名和密码调用后台接口进行校验验证通过之后，根据后台的响应状态跳转到项目主页使用路由导航守卫控制访问权限-4.1项目中出现......
  • Vue - 1 简介与入门
    目录Vue-1简介与入门前端发展历史Vue介绍与基本使用1.Vue介绍渐进式框架官方网站2.Vue特点易用灵活高效3.M-V-VM架构思想①MVVM介绍②MVVM的特性③MVVM的逻辑4.组件......
  • .NET6+WebApi+Vue 前后端分离后台管理系统（一）
    概述项目是用的NET6webapi搭建一个前后端分离的后端管理框架，项目分为：表示层、业务层、数据访问层、数据存储层。 Common：公共组件层，存放一些公共的方法。Model：实体Mod......
  • vuepress v1.x实现meilisearch全文搜索功能
    说明  以个人网站：https://note-taking.cn/为例。  我实现的可以说是最简单的方式（使用宝塔进行服务器操作）。参考链接：https://wiki.eryajf.net/pages/dfc792/一、......
  • vue 插值语法 文本指令 事件指令 属性指令 class和style 条件渲染 列表渲染
    昨日回顾#1put,post提交的json格式必须是标准json字符串格式#2字符串中不小心加了空格#4认证类，当前登录用户可以不去数据库查出来#5斜杠问题(中间件：django.mi......
  • vue 插值语法、文本指令、属性指令、事件指令、class和style、条件渲染、列表渲染
    vuevue介绍vue是一套用于构建用户界面的渐进式框架js框架M-V-VM架构思想MVCMTVMVVCMVP移动端-M：model数据层 js的数据-V：View视图层 html，css-VM：ViewModel......
  • 使用 vuepress + gitee pages 搭建静态网站
    VuePress(v1)：https://v1.vuepress.vuejs.org/zh/guide/shell脚本：npm构建和推送docs/.vuepress/dist到远程分支if[!-epackage.json];thenecho'请在package......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99