Preface

The previous one said v-cloak Instructions , Let's do it today v-text,v-html,v-pre The learning of these three instructions

Data binding instructions

  • v-text: Used to fill in plain text
    • More concise than interpolation expressions , There is no flicker problem .
  • v-html: For filling html fragment
    • There are network security problems , Be vulnerable to XSS Tools , It should not be used on content submitted by users .
    • Website internal data can be used , Third party data cannot be used
  • v-pre: Used to fill in the original information
    • Show the original information , Skip the compilation process

  Example

<div id='app'>
<!-- v-text There will be no flicker problems , So no need v-cloak -->
<div v-text="msg"></div>
<!--  Used to add html fragment  -->
<div v-html="mgs_html"></div>
<!--  Used to display raw information , No need to go through vue The build process , That's the display {{msg_pre}}-->
<div v-pre>{{mgs_pre}}</div>
</div>
 
<!--  To download vue.js -->
<script type='text/javascript' src='js/vue.js'></script>
<script>
//1. html Writing labels in Chinese
//2.  introduce vue.js
//3.  Use vue Render the data .
var vm = new Vue(
{
el: '#app', // Bound to the id Selectors
data: {
"msg": "hello world",
"mgs_html": "<span>html</span>"
}
}
)
</script>

Portal :2021 The latest test data & Position of big factory

Blogger : Test makes money ( One is not for 996 and 996 It's a test open yard farm )

motto : Focus on test development and automation operation and maintenance , Try to read, think and write , Lay the foundation for the financial freedom of an introverted life .

Content category : Technology upgrading , Workplace gossip , Career development , Reading and writing , Investment and Financing , Healthy life .

csdn:https://blog.csdn.net/ccgshigao

Blog Garden :https://www.cnblogs.com/qa-freeroad/

51cto:https://blog.51cto.com/14900374

WeChat official account : Test makes money ( Share exclusive content and resources on a regular basis )