[Vue.js] 基础 -- 模板语法

最新推荐文章于 2023-12-14 13:02:50 发布
最新推荐文章于 2023-12-14 13:02:50 发布
阅读量281 收藏 1
点赞数
分类专栏： Vue.js 文章标签： vue html 模板语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DeathDomain/article/details/108800260
版权

模板语法

Vue.js的模板是合法的HTML

 

基本语法
  • Mustache语法

(双大括号) 的文本插值

 

<span>Message: {{ msg }}</span>

无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

  <div id="app">
    <h5>{{message}}</h5>
    <h5>{{message}}, dg</h5>

    <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
    <h5>{{firstName + lastName}}</h5>
    <h5>{{firstName + ' ' + lastName}}</h5>
    <h5>{{firstName}} {{lastName}}</h5>
    <h5>{{counter * 2}}</h5>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        firstName: 'kobe',
        lastName: 'bryant',
        counter: 100
      },
    })
  </script>

</body>

</html>

 

v-cloak
  • v-cloak指令

先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果

<style>
    [v-cloak]{
		display:none;
    }
</style>
<div v-cloak>{{msg}}</div>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-cloak>{{msg}}</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello Vue'
        }
    })
</script>

</body>
</html>

 

v-once
  • v-once指令

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)

该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变

 

<span v-once>这个将不会改变: {{ msg }}</span>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '111'
    }
  })
</script>

</body>
</html>
数据绑定
  • v-html指令

该指令后面往往会跟上一个string类型

会将string的html解析出来并且进行渲染

09I49e.png

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h4>{{url}}</h4>
  <h4 v-html="url"></h4>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

</body>
</html>

不要对用户提供内容使用插值

 

  • v-text指令

填充纯文本

<div v-text='msg'></div>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <div v-text='msg'></div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello Vue'
        }
    })
</script>

</body>
</html>

 

  • v-pre指令

显示原始信息,跳过编译过程(分析编译过程)

<div v-pre="msg">{{msg}}</div>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <div v-pre="msg">{{msg}}</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello Vue',
        }
    })
</script>

</body>
</html>

 

双向数据绑定
  • v-model指令

在表单控件或者组件上创建双向绑定(数据变化和页面中的变化)

<input type='text' v-model='uname'/>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <div>
        <input type="text" v-model="msg">
    </div>

</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /*

     */
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello Vue'
        }
    })
</script>

</body>
</html>
补充

MVVM设计思想

参考博客

  • M(model)
  • V(view)
  • VM(View-Model)

 

事件绑定
  • v-on指令
<input type='button' v-on:click='num++/'>
<input type='button' @click='num++'/>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <div>
        <button v-on:click="msg++">v-on:</button>
        <button @click="msg++">@</button>
        <button @click="handle">@+函数名称</button>
        <button @click="handle()">@+调用函数</button>
    </div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /*

     */
    var vm = new Vue({
        el:'#app',
        data:{
            msg:0
        },
        methods:{
            handle:function () {
                //这里的this是Vue的实例对象
                this.msg++
            }
        }
    })
</script>

</body>
</html>

 

  • 基本用法
  • 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
  • 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <div>
        <button v-on:click="handle1">v-on:</button>
        <button @click="handle2(123,456,$event)">@</button>

    </div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /*
        事件绑定-参数传递
            1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
            2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
     */
    var vm = new Vue({
        el:'#app',
        data:{
            msg:0
        },
        methods:{
            handle2:function (p,p1,event) {
                console.log(p,p1)
                console. log (event.target.tagName)
                //这里的this是Vue的实例对象
                this.msg++
            },
            handle1:function (event) {

            }
        }
    })
</script>

</body>
</html>

 

  • 事件修饰符

    • .stop` 阻止冒泡
    <a v-on:click.stop="handle">跳转</a>
    • .prevent 阻止默认行为
    <a v-on:click.prevent="handle">跳转</ a>
    • .capture 添加事件监听器时使用事件捕获模式
    <div v-on:click.capture="doThis">...</div>
    • .self 事件不是从内部元素触发的
    <div v-on:click.self="doThat">...</div>
    • .once
    • .passive

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <div v-on:click="handle1">
        <button v-on:click.stop="handle2">点击</button>
    </div>
    <div>
        <a href="http:www.baidu.com" v-on:click.prevent="handle2">百度</a>
    </div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            msg:0
        },
        methods:{
            handle0:function () {
                this.msg++;
            },
            handle1:function (event) {
                //阻止冒泡
                event.stopPropagation()
            },
            handle2:function (event) {
                //阻止默认行为
                event.preventDefault()
            }
        }
    })
</script>

</body>
</html>

 

  • 按键修饰符

    • .enter 回车键
    <input v-on:keyup.enter='submit'>
    • .delete 删除键
    <input v-on:keyup.delete='handle'>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <form action="">
        <div>
            用户名:
            <input type="text" v-on:keyup.delete="clearContent" v-model="uname">
        </div>
        <div>
            密码:
            <input type="text" v-on:keyup.enter="handleSubmit" v-model="pwd">
        </div>
        <div>
            <input type="button" v-on:click="handleSubmit" value="提交">
        </div>
    </form>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            uname:'',
            pwd:''
        },
        methods:{
            clearContent:function(){
                //按delete键的时候,清空用户名
                this.uname=''
            },
            handleSubmit:function () {
                console.log(this.uname,this.pwd);
            }
        }
    })
</script>

</body>
</html>

 

  • 自定义按键修饰符

    • 全局config.keyCodes对象
    vue.config.keycodes.f1 = 112

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-on:keyup.aaa="handle" v-model="info">
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /*
        规则:自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
     */
    Vue.config.keyCode.aaa=65
    var vm = new Vue({
        el:'#app',
        data:{
            info:''
        },
        methods:{
            handle:function (event) {
                console.log(event.keyCode);
            }
        }
    })
</script>

</body>
</html>

 

补充

Vue 自定义按键修饰符对应表

 

案例 - 简单计算器

实现简单的加法计算，分别输入数值a和数值b，点击计算按钮，结果显示在下面。

  • 通过v-model指令实现数值a和数值b的绑定
  • 给计算按钮绑定事件，实现计算逻辑
  • 将计算结果绑定到对应位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>简单计算器</h1>
    <div>
        <span>数值A:</span>
        <span>
            <input type="text" v-model="a">
        </span>
    </div>
    <div>
        <span>数值B:</span>
        <span>
            <input type="text" v-model="b">
        </span>
    </div>
    <div>
        <button v-on:click="c">计算</button>
    </div>
    <div>
        <span>计算结果:</span>
        <span v-text="result"></span>
    </div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            a:'',
            b:'',
            result:''
        },
        methods:{
            c:function (event) {
                //实现计算逻辑
                this.result=parseInt(this.a)+parseInt(this.b)
            }
        }
    })
</script>
</body>
</html>

 

属性绑定
  • v-bind指令

动态处理属性

<a v-bind:href='url'>跳转</a>
<a :href='url'>跳转</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a v-bind:href="url">百度</a>
    <button v-on:click="a">切换</button>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            url:'http://www.baidu.com'
        },
        methods:{
            a:function(){
                this.url='https://blog.csdn.net/DeathDomain'
            }
        }
    })
</script>

</body>
</html>

 

样式绑定

  • class 样式绑定

    • 对象语法
    <div v-bind:class="{ active: isActive }"></div>


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:class="{active:isActive,error:isError}">测试</div>
    <button v-on:click="a">切换</button>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            isActive:true,
            isError:true
        },
        methods: {
            a:function () {
                //控制isActive的值在true和false之间进行切换
                this.isActive = !this.isActive
                this.isError = !this.isError
            }
        }
    })
</script>

</body>
</html>

     

    • 数组语法
    <div v-bind:class=" [activeclass, errorClass] "></div>


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:class="[activeClass,errorClass]">测试</div>
    <button v-on:click="a">切换</button>

</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            activeClass:'active',
            errorClass:'error'
        },
        methods: {
            a:function () {
                this.activeClass=''
                this.errorClass=''
            }
        }
    })
</script>

</body>
</html>

  • style样式处理

    • 对象语法
    <div v-bind:style="{ color: activeColor, fontsize: fontsize } "></div>


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>
    <div v-bind:style="objStyle"></div>
    <button v-on:click="a">切换</button>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            borderStyle:'1px solid blue',
            widthStyle:'100px',
            heightStyle:'100px',
            objStyle:{
                border:"1px solid green",
                width:"200px",
                height:'200px'
            }
        },
        methods:{
            a:function () {
                this.heightStyle = '200px'
                this.objStyle.width='100px'
            }
        }
    })
</script>

</body>
</html>

     

    • 数组语法
    <div v-bind:style="[baseStyles,overridingStyles]"</div>


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>
    <div v-bind:style="objStyle"></div>
    <div v-bind:style='[objStyle, overrideStyles]'></div>
    <button v-on:click="a">切换</button>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            borderStyle:'1px solid blue',
            widthStyle:'100px',
            heightStyle:'100px',
            objStyle:{
                border:"1px solid green",
                width:"200px",
                height:'200px'
            },
            overrideStyles:{
                border: '5px solid red',
                backgroundColor:'blue'
            }
        },
        methods:{
            a:function () {
                this.heightStyle = '200px'
                this.objStyle.width='100px'
            }
        }
    })
</script>

</body>
</html>

 

细节处理

样式绑定相关语法细节:

  • 对象绑定和数组绑定可以结合使用
  • class绑定的值可以简化操作
  • 默认的class如何处理?默认的class会保留
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: orange;
        }
        .test{
            color: black;
        }
        .base{
            font-size: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:class="[activeClass,errorClass,{test:isTest}]">测试</div>
    <div v-on:click="arrClasses"></div>
    <div v-on:click="objClasses"></div>
    <div class="base" v-bind:class="objClasses"></div>
    <button v-on:click="a">切换</button>

</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            activeClass:'active',
            errorClass:'error',
            isTest:true,
            arrClasses:['active','error'],
            objClasses:{
                active:true,
                error:true
            }
        },
        methods: {
            a:function () {
                // this.isTest = false
                this.objClasses.error = false
            }
        }
    })
</script>

</body>
</html>
分支循环结构

  • 分支结构

    • v-if
    • v-else
    • v-else-if
    • v-show

  • v-if与v-show的区别

    • v-if控制元素是否渲染到页面
    • v-show控制元素是否显示（已经渲染到了页面)

  • 循环结构

    • v-for遍历数组
    <li v-for='item in list'>{{item}}</ li>
<li v-for='(item, index) in list'>{{iten}} + '---' +{ {index}}</li>
    • key的作用:帮助Vue区分不同的元素，从而提高性能
    <li :key='item.id' v-for='(item,index) in list'>{{item}} + '---'{{index}}</li>


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>水果列表</div>
    <ul>
        <li v-for="item in fruits">{{item}}</li>
        <li v-for="(item,index) in fruits">{{item+'---'+index}}</li>
        <li v-for="item in M">
            <span>{{item.ename}}</span>
            <span>{{item.cname}}</span>
        </li>
    </ul>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            fruits:['apple','orange','banana'],
            M:[{
                ename:'apple',
                cname:'苹果'
            },{
                ename:'orange',
                cname:'橘子'
            },{
                ename:'banana',
                cname:'香蕉'
            }]
        },
        methods:{

        }
    })
</script>

</body>
</html>
^ω^奋斗小青年
关注
专栏目录
Vuejs（一）：Vuejs模板语法
11-10 903
Vuejs（一）：Vuejs基础语法一：vuejs介绍 一：vuejs介绍 Vue (读音 /vjuː/，类似于 view) Vue是一个渐进式的框架，什么是渐进式的呢？ 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。 比如Core+Vue-router+Vuex，也可以满足你各种各样...
Vue.js基础---简单的模板页面
weixin_46505015的博客
07-03 1222
Vue.js基础—简单的模板页面 1.模板页面包含了哪些东西？ –> html + js 2.js以什么形式(语法)存在？ 插值: 双大括号表达式，插入一个动态的值在标签内文本内容上，动态显示数据 指令: vue自定义标签属性(以v-开头)，属性值是一个js的表达式 v-model=“msg”，指令操作的是标签 指令和插值中的表达式 自动 从data中动态取数据 3.双向数据绑定, 2个重要特点: 只要改变data中的数据值, 界面就自动更新 ===> 数据(单向)绑定 data =
v-bind 绑定属性语法
u014265398的博客
10-14 637
文章目录前言一.v-bind语法1.绑定id 和src 属性2 .绑定class对象语法1.语法一2. 语法二3.绑定class数组语法4. 绑定style对象语法5. v-bind 绑定style数组语法总结 前言 学习v-bind 绑定对象的相关语法 一.v-bind语法 1.绑定id 和src 属性 <div id="app"> <img v-bind:src="src"/> <input type='text' v-bind:id='id'
js 模板语法
zshsats博客
09-10 3709
js 模板语法 使用artTemplate:https://aui.github.io/art-template/zh-cn/docs/index.html
Js模板语法
m0_64081601的博客
09-22 248
Js模板语法es6
vue.js基础学习（模板语法）
qq_58866450的博客
08-19 214
基础入门：vue.js模板语法。
vue.js-devtools_5.1.1解压后 在浏览器扩展程序直接加载已解压 即可使用
04-20
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。Vue.js-devtools 是一个配套的开发者工具，它提供了一个浏览器扩展程序，帮助开发者调试Vue应用程序，观察并操作应用状态，以及深入...
IDEA下载vue.js插件-IDEA搜索不到vue.js该怎么安装
09-20
此时，IDEA将提供Vue.js语法高亮、代码补全、Vue模板支持等功能，极大地提高开发效率。 另外，Vue.js插件的使用技巧和常见问题： - 在Vue.js项目中，插件会自动识别`.vue`文件，并提供相应的语法检查和代码提示。 ...
vue.js 2.0 - 快速开始组件化开发应用的模板.zip
最新发布
02-09
2. **模板语法**：Vue的模板语法允许开发者使用声明式地绑定数据到DOM元素。例如，使用`v-bind`指令绑定属性，`v-model`双向数据绑定，以及`v-if`、`v-for`等控制流指令。 3. **组件实例**：每个Vue组件都是一个...
Vue.js 教程 - v1.0.pdf
06-05
#### 二、Vue.js 基础语法 - **指令**：Vue 提供了一系列内置指令来操作 DOM，如 `v-bind` 用于动态绑定属性，`v-if` 用于条件渲染等。 - **表达式**：Vue 允许在双大括号 `{{ }}` 中插入表达式，这些表达式可以是...
JS 模板语法 ES6
指尖跳动，代码改变生活
03-09 1536
ES6中引入一种新的模板语法，使用 `` 包裹的字符可以直接输出，然后使用 ${} 去处理表达式。 let title = 'ES6模板语法'; let template = ` <span class="media-title">${title}</span> `; console.log(template); // 结果 <span class=...
四、Vue.js 模板语法
走在bug的路上
09-26 4823
● 应用程序实例 ● 插值 ● 指令
3 — v-bind 绑定属性
By
01-04 543
v-bind
Vue基础语法之指令v-bind
Ryangfeng
02-10 337
指令v-bind 可以绑定变量、表达式、执行函数等内容 动态绑定属性,属性中的值可以从变量中获取 和普通类同时存在时，并不会冲突 1、v-bind动态绑定class属性 1. 变量用法 动态绑定属性,属性中的值可以从变量中获取 语法糖(简写形式) <div id="app"> <img v-bind:src="imgUrl"> <a v-bind:href="aHref">百度一下</a> <!--语法糖(简写形式)-->
v-bind 绑定 class、style 属性
404源码社区 - Admin404
01-17 525
1. v-bind 绑定 class 属性对象语法 对象语法的含义是:class后面跟的是一个对象，语法格式: <span :class="{类名: 布尔值}"></span> 使用示例: 当布尔值为 true 时才显示该类名 :class 属性是一个对象，对象中的键值可以是布尔值，也可以是 vue 示例中的 data 数据名称 <span :class="{actived: isShow}"></span> <span :clas..
初学VUE.js及模板语法
XiaoSen207的博客
09-15 294
Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。 举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式， 且可以直接读取到data中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举个例子。 ...
JS中的模板字符串（ES6中的模板字面量语法），什么是模板字符串、怎么使用，附代码演示
zhangfuping123456789的博客
12-14 1042
js、ES6、javascript
Vue 常用指令 v-bind 设置、绑定元素属性
小楼一夜听春雨，深巷明朝卖杏花
07-05 4214
用于动态绑定一个或多个属性值，或者向另一个组件传递props值(这个后面再介绍)，应用场景:图片地址src、超链接href、动态绑定一些类、样式等等。使用v-bind是因为html标签里面有很多的属性值不是写死的，它也是一个动态的值，是一个变量。data里面定义的属性可以在整个view实例里面去使用，这个是要用this的。v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。使用了v-bind之后，引号里面的就不再是字符串了，而是引用的变量了。使用v-bind就可以在属性里面传递变量了，
Vue.js v-for 指令的深度解析与实践技巧
Vue.js是由尤雨溪创建的一个高效的JavaScript框架，广泛应用于构建用户界面和单页应用程序（SPAs）。其核心特性包括响应式数据绑定、组件系统、虚拟DOM、易用性、灵活性和强大的工具链支持。" ### Vue.js v-for ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值