Vue3.0学习笔记-插值表达式和b-bind

插值表达式和v-bind的使用

插值表达式

v-html 指令

v-once指令 -- 只渲染一次

插值表达式可以使用 js表达式,如三元运算符;但不能使用js语句,例如if

v-bind指令能设置html标签的属性值,例如设置h2的title

<h2 v-on:click="handleItemClick" v-html="message" v-once  title="message"> </h2>

这跟使用组件时,通过v-bind指令,将属性值传入组件props是相似的

Demo9.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello world'
            }
        },
        methods: {
            messageBtnClick() {
                this.message = this.message == 'Hello world' ? 'Good Bye' : 'Hello world';
                console.log(document.getElementById('apph4').title);
            }
        },
        template: '<h1>{{message + " gogogo"}}</h1>' +
            '<button v-on:click="messageBtnClick">文字按钮</button>' +
            '<h2 v-html="message"></h2>' +
            '<h3 v-html="message" v-once></h3>' +
            '<h4 v-html="message" v-bind:title="message" id="apph4"></h4>'
    });
    const vm = app.mount("#app");
    console.log(document.getElementById('apph4').title);
</script>
</html>

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页