vue中的全部指令

最新推荐文章于 2022-12-07 15:58:09 发布

Orangefishs_

最新推荐文章于 2022-12-07 15:58:09 发布

阅读量491

点赞数 19

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ORANGEFISHs/article/details/125284246

版权

Vue指令

1、直接使用{{ }} 将数据释为普通文本，展示在页面中
举例：<h1> {{str}} </h1>

<body>
    <div id="app">    
        <h2>{{str}}</h2> 
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               str: '<div>学习vue指令</div>',
           },
           methods:{}
        });
    </script>

2、v-html ：会将元素当成HTML标签解析后输出（简单说就是它可以解析标签）相当于innerHtml
举例：<h1 v-html="str"></h1>

<body>
    <div id="app">    
        <h2 v-html = "str"></h2> 
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               str: '<div>学习vue指令</div>',
           },
           methods:{}
        });
    </script>

3、v-text：会将元素当成纯文本输出（他不解析标签）
举例：<h1 v-text="str"></h1>

<body>
    <div id="app">    
        <h2 v-text = "str"></h2> 
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               str: '<div>学习vue指令</div>',
           },
           methods:{}
        });
    </script>

4、v-if : 根据条件判断标签是否加载
举例： <h1 v-if="true">{{str}}</h1>

<body>
    <div id="app">    
        <h2 v-if= "bol"></h2> 
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
              bol:false
           },
           methods:{}
        });
    </script>

5、v-for：循环
举例：v-for 循环遍历 array —> value
<p v-for="value in arr">{{value}}</p>
v-for 循环遍历 array —> index ---- value
<p v-for="(value,index) in arr">{{index}}----->{{value}}</p>


  <ul>
       <li v-for="value in arr">
            <h3>id:{{value.id}}</h3>
            <h3>name:{{value.name}}</h3>
       </li>
    <ul>
     <script src="./js/vue.min.js"></script>
	 <script>
        var vm = new Vue({
           el:'#app',
           data:{
             arr:[
		        {id: 1,name: '小明'},
		        {id: 2,name: '小红'},
		        {id: 3,name: '小绿'},
		      ]
           },
           methods:{}
        });
    </script>

6、v-on：给标签绑定函数
举例：<h1 v-on:click="demo">{{str}}</h1>
简写方式：<h1 @click="demo">{{str}}</h1> 将v-on换成@

 <div id="app">
        <input type="button" value="v-on指令" v-on:click= "one">
        <input type="button" value="v-on指令简写" @click= "two">
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{},
           methods:{
               one: function(){
                   alert('我是Vue中v-on指令，我的作用是为元素绑定事件，v-on:click= ""');
               },
               two: function(){
                alert('我是Vue中v-on指令，我的作用是为元素绑定事件,简写方法 @click=""');
               }
           }
        });
    </script>

7、v-show：根据条件判断内容是否展示 v-show还可以写表达式哦
举例： <h1 v-show="false">{{str}}</h1>

<body>
    <div id="app">    
        <h2 v-show= "show > 20"></h2> 
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
              show:60
           },
           methods:{}
        });
    </script>

8、 v-bind :动态数据引用
举例：<a v-bind:href="url">{{str}}</a>

<div id="app">
        <!-- v-bind 是一个绑定指令，他可以绑定任何一个标签的任何属性 -->
        <img v-bind:src="src">
     
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               src: './img/1.jpg'
           },
           methods:{ //是vue中存储函数和方法的地方
           }
        });
    </script>

9、v-model：双向数据绑定一般用表单中
举例：<input v-model="name" />

  <div id="app">
        <!--作用体现在绑定的变量的值跟在浏览器上显示的内容保持一值 -->
            <input type="text" v-model="message">
            <h1> {{message}} </h1>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        var vm = new Vue({
           el:'#app',
           data:{
               message:"",
           }
        })
    </script>

10、v-once ：执行一次性地插值，当数据改变时，插值处的内容不会更新
举例：<span v-once>这个将不会改变: {{ msg }}</span>

 <div id="app">
        <input type="text" v-model="str">
        <h1 v-once>初始化数据：{{str}}</h1>
        <h1>新数据：{{str}}</h1>
    </div>
<script src="./js/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            str:"123456"
        }
    })
</script>