[转] VUE 的常用指令

    <div id="app">
        <p v-text="username"></p>
        <p v-text="gender">性别</p>

        <p>姓名：{{username}}</p>
        <p>性别：{{gender}}</p>

        <p v-html="desc"></p>
    </div>

v-text 按文本赋值，会覆盖控件原本的值

<p v-text="username"></p>
<p v-text="gender">性别</p>

<p>zs</p>
<p>男</p>

{{ }} 按文本赋值

<p>姓名：{{username}}</p>
<p>性别：{{gender}}</p>

<p>姓名：zs</p>
<p>性别：男</p>

v-html 按 html 格式赋值

<p v-html="desc"></p>

<p><i>abc</i></p>

v-bind 绑定属性的值

<!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>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:placeholder="inputValue" />
        <hr>
        <img v-bind:src="imgSrc">
        <br /><br />
        <input type="text" :placeholder="inputValue" />
        <hr>
        <img :src="imgSrc">
    </div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            inputValue: '请输入内容',
            imgSrc: './images/logo.png'
        }
    })
</script>

</body>
</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>Document</title>
</head>
<body>
    <div id="app">
        <p>{{ number + 2 }}</p>
        <p>{{ ok ? "True" : 'False' }}</p>
        <p>{{ message }} {{ message.split('').reverse().join('') }}</p>
        <p :id="'list' + id">xxx</p>
        <p>{{ user.name }}</p>
    </div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            number: 9,
            ok: false,
            message: 'ABC',
            id: 3,
            user:{
                name: 'zs'
            }
        }
    })
</script>

</body>
</html>

posted on 2022-10-17 07:46 z5337 阅读(32) 评论(0) 收藏举报