526互联

Vue3+.net6.0 二 模板语法-属性绑定，指令绑定，动态属性和指令，修饰符

发布时间 2023-07-10 13:47:28作者: luytest

Vue部分

    const { createApp} = Vue;
    const app = createApp({
        data() {
            return {
                count: 0,
                content:'<h3>我是html内容<h3/>',
                isDisabled:false
            }
        }
    });
    app.mount('#appDiv');

 

插入文本

双大括号 {{ text }} ，与Vue2.x 一样。

 <h1 class="display-4">{{count}}</h1>

插入html

v-html = xxxx，同Vue2，另外动态绑定html时一定要做校验，并且不能信任第三方的html内容。

 <span v-html="content"></span>

属性绑定

v-bind:id=xxxx,简写为 : id =xxxx ,同Vue2。

<input type="button" :disabled="isDisabled" v-on:click="count++" value="点击++"/>

动态绑定多个值

data中添加新属性

objectOfAttrs: {
                    id: 'div002',
                    class: 'wrapper'
                }

html部分添加一个div，绑定这个属性

 <div v-bind="objectOfAttrs">我是div002</div>

生成页面上按f12可以看到这个div的属性是，我们通过动态绑定把新的div的id和class都设置好了。

<div id="div002" class="wrapper">我是div002</div>

JavaScript表达式

Vue所有的数据绑定都支持完整的JavaScript表达式，比如三元表达式，函数，字符串拼接等。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

同时也每个绑定也只支持单一的表达式，你不能绑定一大段代码。一个简单的判断方法是是否可以合法地写在 return 后面。

比如这些肯定不行

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

 

指令绑定

常用指令也还是那几个，v-if, v-on. v-for 等等，用法没有变化。

指令也可以动态绑定

<a v-bind:[attributename]="url"> ... </a>

<!-- 简写 -->
<a :[attributename]="url"> ... </a>

这个attributename是我们在data中定义的一个属性，值是href，那么这里等价为 href = "url"。

动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。

需要注意的是，为了避免不必要的错误，动态属性名最好都用小写。

 

修饰符

修饰符跟Vue2一样，可以参考之前Vue2的内容。