snipt

Ctrl+h for KB shortcuts

HTML

Onenote/Web - JS PHP/Vue。。。/code snippets

<!--Vue HTML commands-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue HTML commands</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-html="message"></div>
        </div>
        
        <script>
            new Vue({
                el: '#app',
                data: {
                    message: '<h1>菜鸟教程</h1>'
                }
            })
        </script>
    </body>
</html>



<!--Vue v-model/v-bind-->
<style>
    .class1{
        background: #444;
        color: #eee;
    }
</style>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    
    <div id="app">
        <label for="r1">change color</label><input type="checkbox" v-model="use" id="r1"><br><br>
        <div v-bind:class="{'class1': use}">
            v-bind:class depends on v-model
        </div>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data:{
                use: true
            }
        });
    </script>
</body>
https://snippets.siftie.com/embed/edf611ab9e0ba838a9bb601f8090bdb9/
/raw/edf611ab9e0ba838a9bb601f8090bdb9/
edf611ab9e0ba838a9bb601f8090bdb9
html
HTML
52
2019-04-20T17:00:40
True
False
False
Feb 21, 2019 at 01:40 AM
/api/public/snipt/148269/
onenoteweb-js-phpvuecode-snippets
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a> <a href="#L-35">35</a> <a href="#L-36">36</a> <a href="#L-37">37</a> <a href="#L-38">38</a> <a href="#L-39">39</a> <a href="#L-40">40</a> <a href="#L-41">41</a> <a href="#L-42">42</a> <a href="#L-43">43</a> <a href="#L-44">44</a> <a href="#L-45">45</a> <a href="#L-46">46</a> <a href="#L-47">47</a> <a href="#L-48">48</a> <a href="#L-49">49</a> <a href="#L-50">50</a> <a href="#L-51">51</a> <a href="#L-52">52</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="c">&lt;!--Vue HTML commands--&gt;</span> </span><span id="L-2"><a name="L-2"></a><span class="cp">&lt;!DOCTYPE html&gt;</span> </span><span id="L-3"><a name="L-3"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span><span id="L-4"><a name="L-4"></a> <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span><span id="L-5"><a name="L-5"></a> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span> </span><span id="L-6"><a name="L-6"></a> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Vue HTML commands<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span><span id="L-7"><a name="L-7"></a> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdn.staticfile.org/vue/2.2.2/vue.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-8"><a name="L-8"></a> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span><span id="L-9"><a name="L-9"></a> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span><span id="L-10"><a name="L-10"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;app&quot;</span><span class="p">&gt;</span> </span><span id="L-11"><a name="L-11"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-html</span><span class="o">=</span><span class="s">&quot;message&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-12"><a name="L-12"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-13"><a name="L-13"></a> </span><span id="L-14"><a name="L-14"></a> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-15"><a name="L-15"></a> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span> </span><span id="L-16"><a name="L-16"></a> <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span> </span><span id="L-17"><a name="L-17"></a> <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> </span><span id="L-18"><a name="L-18"></a> <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;&lt;h1&gt;菜鸟教程&lt;/h1&gt;&#39;</span> </span><span id="L-19"><a name="L-19"></a> <span class="p">}</span> </span><span id="L-20"><a name="L-20"></a> <span class="p">})</span> </span><span id="L-21"><a name="L-21"></a> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-22"><a name="L-22"></a> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span><span id="L-23"><a name="L-23"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span><span id="L-24"><a name="L-24"></a> </span><span id="L-25"><a name="L-25"></a> </span><span id="L-26"><a name="L-26"></a> </span><span id="L-27"><a name="L-27"></a><span class="c">&lt;!--Vue v-model/v-bind--&gt;</span> </span><span id="L-28"><a name="L-28"></a><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span><span id="L-29"><a name="L-29"></a> <span class="nc">.class1</span><span class="p">{</span> </span><span id="L-30"><a name="L-30"></a> <span class="nb">background</span><span class="o">:</span> <span class="m">#444</span><span class="p">;</span> </span><span id="L-31"><a name="L-31"></a> <span class="nb">color</span><span class="o">:</span> <span class="m">#eee</span><span class="p">;</span> </span><span id="L-32"><a name="L-32"></a> <span class="p">}</span> </span><span id="L-33"><a name="L-33"></a><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span><span id="L-34"><a name="L-34"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span><span id="L-35"><a name="L-35"></a> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdn.staticfile.org/vue/2.2.2/vue.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-36"><a name="L-36"></a> </span><span id="L-37"><a name="L-37"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;app&quot;</span><span class="p">&gt;</span> </span><span id="L-38"><a name="L-38"></a> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;r1&quot;</span><span class="p">&gt;</span>change color<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&quot;use&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;r1&quot;</span><span class="p">&gt;&lt;</span><span class="nt">br</span><span class="p">&gt;&lt;</span><span class="nt">br</span><span class="p">&gt;</span> </span><span id="L-39"><a name="L-39"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-bind:class</span><span class="o">=</span><span class="s">&quot;{&#39;class1&#39;: use}&quot;</span><span class="p">&gt;</span> </span><span id="L-40"><a name="L-40"></a> v-bind:class depends on v-model </span><span id="L-41"><a name="L-41"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-42"><a name="L-42"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-43"><a name="L-43"></a> </span><span id="L-44"><a name="L-44"></a> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-45"><a name="L-45"></a> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span> </span><span id="L-46"><a name="L-46"></a> <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#app&#39;</span><span class="p">,</span> </span><span id="L-47"><a name="L-47"></a> <span class="nx">data</span><span class="o">:</span><span class="p">{</span> </span><span id="L-48"><a name="L-48"></a> <span class="nx">use</span><span class="o">:</span> <span class="kc">true</span> </span><span id="L-49"><a name="L-49"></a> <span class="p">}</span> </span><span id="L-50"><a name="L-50"></a> <span class="p">});</span> </span><span id="L-51"><a name="L-51"></a> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-52"><a name="L-52"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></pre></div> </td></tr></table>
--- 
+++ 
@@ -0,0 +1,52 @@
+<!--Vue HTML commands-->
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Vue HTML commands</title>
+        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
+    </head>
+    <body>
+        <div id="app">
+            <div v-html="message"></div>
+        </div>
+        
+        <script>
+            new Vue({
+                el: '#app',
+                data: {
+                    message: '<h1>菜鸟教程</h1>'
+                }
+            })
+        </script>
+    </body>
+</html>
+
+
+
+<!--Vue v-model/v-bind-->
+<style>
+    .class1{
+        background: #444;
+        color: #eee;
+    }
+</style>
+<body>
+    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
+    
+    <div id="app">
+        <label for="r1">change color</label><input type="checkbox" v-model="use" id="r1"><br><br>
+        <div v-bind:class="{'class1': use}">
+            v-bind:class depends on v-model
+        </div>
+    </div>
+    
+    <script>
+        new Vue({
+            el: '#app',
+            data:{
+                use: true
+            }
+        });
+    </script>
+</body>