vue 第二天指令

最新推荐文章于 2023-03-10 09:05:28 发布

lilianggui

最新推荐文章于 2023-03-10 09:05:28 发布

阅读量240

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/lilianggui/article/details/103025959

版权

vuejs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

vue提供了丰富的指令，可以绑定标签的属性、事件、条件、循环等，指令通常以v-开头。

1、v-bind绑定属性指令，可以绑定标签的原生属性，如class、style、id、value等，可以缩写成:属性名

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <style>
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        {{message}}
        <p v-bind:id="id" v-bind:class="cls" v-bind:style="sty">
            我是一段文字
        </p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: function(){
                return {
                    message: 'Hello World',
                    cls: 'red',
                    id: 'name_id',
                    sty:{'font-size': '18px', 'line-height': '40px', 'background-color': '#ccc'}
                }
            }
        });
    </script>
</body>
</html>

3、v-text，将文本直接填充到标签内，类似于innerText，v-html将html填充到标签内，类似于innerHtml

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">

        <div v-text="text"></div>
        <div v-html="html"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: function(){
                return {
                    text: '把我填充到标签中去吧',
                    html:'<h2>我是一段html</h2>'
                }
            }
        });
    </script>
</body>
</html>

4、v-on事件绑定，可以缩写成@事件名称，例如点击事件，输入事件，改变事件，鼠标上移事件等

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="alertSomeThing">点击</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: function(){
                return {

                }
            },
            methods: {
                alertSomeThing(){
                    alert('你点击了');
                }
            }
        });
    </script>
</body>
</html>

5、v-model双向数据绑定，输入框输入的值会影响绑定的变量，绑定变量的改变也会影响输入框的值

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">

        <input v-model="name">
        {{name}}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: function(){
                return {
                    name: '李白'
                }
            }
        });
    </script>
</body>
</html>

lilianggui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 第二天指令

vue提供了丰富的指令，可以绑定标签的属性、事件、条件、循环等，指令通常以v-开头。1、v-bind绑定属性指令，可以绑定标签的原生属性，如class、style、id、value等，可以缩写成:属性名<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><h...
复制链接

扫一扫